ChartJS 如何使用图表创建两个x轴标签,js

xoshrz7s 于 2023-04-30 发布在 Chart.js

关注(0)|答案(4)|浏览(152)

有一种方法可以为y轴创建两个标签。但是如何在图表中创建多个x轴标签。js？eg：示例如下：How to group (two-level) axis labels

chart.js

来源：https://stackoverflow.com/questions/42934608/how-to-create-two-x-axes-label-using-chart-js

4条答案

按热度按时间

wmtdaxz31#

仅适用于v2（v3参见@LeeLenalee的回答）

这个问题已经在github here上得到了回答
这是一个工作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>

赞(0）回复(0）举报 2023-04-30

gkn4icbw2#

更新了接受的答案，以也适用于V3和V4，因为天平配置已更改：

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>

赞(0）回复(0）举报 2023-04-30

qojgxg4l3#

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",
      }],
    }, 
  },
});

赞(0）回复(0）举报 2023-04-30

plupiseo4#

好的，也许会晚一点。）
我们如何显示第二个x轴行中的最后一个刻度？
使用上面的代码，我们返回一个空字符串。我想看看最后一点的标签。

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

thx的帮助。
编辑
我改变了一点，但不完全像我会我不希望在30和31只是最后一天W的标签。a.w31标签，30不是标签
月结束于30 =〉标签

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

赞(0）回复(0）举报 2023-04-30

我来回答

ChartJS 如何使用图表创建两个x轴标签,js

4条答案

仅适用于v2（v3参见@LeeLenalee的回答）

相关问题

热门标签

最新问答