ChartJS行中每个数据集的专用标签

时间:2019-02-07 09:36:15

标签: javascript charts chart.js

我需要在一个折线图中可视化带有2个不同标签的2个数据集,它始终为两个数据集显示一个标签。 有没有办法在一张图表中拥有2个完全不同的数据集和标签。

这是我尝试过的:

  var ctx = $("#myChart");
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["Green", "Yellow", "Red", "Purple", "Blue"],
      datasets: [{
        data: [1, 2, 3, 4, 5],
        backgroundColor: [
          'green',
          'yellow',
          'red',
          'purple',
          'blue',
        ],
        labels: [
          'green',
          'yellow',
          'red',
          'purple',
          'blue',
        ]
      }, {
        data: [6, 7, 8],
        backgroundColor: [
          'black',
          'grey',
          'lightgrey'
        ],
        labels: [
          'black',
          'grey',
          'lightgrey'
        ],
      }, ]
    },
    options: {
      responsive: true,
      legend: {
        display: false,
      },
      tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
            var dataset = data.datasets[tooltipItem.datasetIndex];
            var index = tooltipItem.index;
            return dataset.labels[index] + ': ' + dataset.data[index];
          }
        }
      }
    }
  });

https://jsfiddle.net/u17ed6nq/

0 个答案:

没有答案