簡體   English   中英

如何使用chart.js創建兩個x軸標簽

[英]How to create two x-axes label using chart.js

有一種方法可以為 y 軸創建兩​​個標簽。 但是如何在 chart.js 中制作多個 x 軸標簽? 例如:此圖中的示例:如何對(兩級)軸標簽進行分組

這個問題已經回答了在github這里

這是一個有效的JSFiddle

 var ctx = $("#c"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["January;2015", "February;2015", "March;2015", "January;2016", "February;2016", "March;2016"], datasets: [{ label: '# of Votes', xAxisID:'xAxis1', data: [12, 19, 3, 5, 2, 3] }] }, options:{ scales:{ xAxes:[ { id:'xAxis1', type:"category", ticks:{ callback:function(label){ var month = label.split(";")[0]; var year = label.split(";")[1]; return month; } } }, { id:'xAxis2', type:"category", gridLines: { drawOnChartArea: false, // only want the grid lines for one axis to show up }, ticks:{ callback:function(label){ var month = label.split(";")[0]; var year = label.split(";")[1]; if(month === "February"){ return year; }else{ return ""; } } } }], yAxes:[{ ticks:{ beginAtZero:true } }] } } });
 <body> <canvas id="c" width="400" height="300"></canvas> <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> </body>

var myChart = new Chart(ctx, {
  type: "line",
  data: {
    datasets: [{
      data: [20, 50, 100, 75, 25, 0],
      label: "Left dataset",

      // This binds the dataset to the left y axis
      yAxisID: "left-y-axis",
    }, {
      data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
      label: "Right dataset",

      // This binds the dataset to the right y axis
      yAxisID: "right-y-axis",
    }],
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  },
  options: {
    scales: {
      yAxes: [{
        id: "left-y-axis",
        type: "linear",
        position: "left",
      }, {
        id: "right-y-axis",
        type: "linear",
        position: "right",
      }],
    }, 
  },
});

在此處輸入圖片說明

好吧,可能有點晚了;)

我們如何在第二個 x 軸行中顯示最后一個刻度?

使用上面的代碼,我們返回一個空字符串。 我想看看最后一點的標簽。

      ticks:{
        callback:function(label){
          var month = label.split(";")[0];
          var year = label.split(";")[1];
          if(month === "February"){
            return year;
          }else{
            return "";  **<==== ???**
          }

謝謝你的幫助。

編輯

我改變了一點但不完整,就像我不想要標簽在 30 和 31 就在最后一天 waw 31 標簽,30 不是標簽

月份結束於 30 => 標簽

            return month;
          }else if 
            (Nbrday === "31"){
            return month;
          }else if 
            (Nbrday === "30"){
            return month;
          }
            else{
              // return month;
            return "";

由於縮放配置已更改,更新已接受的答案也適用於 V3:

 var ctx = $("#c"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["January;2015", "February;2015", "March;2015", "January;2016", "February;2016", "March;2016"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3] }] }, options: { scales: { x: { ticks: { callback: function(label) { let realLabel = this.getLabelForValue(label) var month = realLabel.split(";")[0]; var year = realLabel.split(";")[1]; return month; } } }, xAxis2: { type: "category", grid: { drawOnChartArea: false, // only want the grid lines for one axis to show up }, ticks: { callback: function(label) { let realLabel = this.getLabelForValue(label) var month = realLabel.split(";")[0]; var year = realLabel.split(";")[1]; if (month === "February") { return year; } else { return ""; } } } }, y: { beginAtZero: true } } } });
 <body> <canvas id="c" width="400" height="300"></canvas> <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script> </body>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM