Question

我使用带有两个数据集的Chart.js创建了一个圆环图。该图显示了全球办事处的员工数量，第二个数据集将其分解为永久和合同员工。

这里有一个小问题：https://jsfiddle.net/tetsujin1979/tt3ch8z7/

＆＃34;标签＆＃34;图表选项的属性包含办公室的名称，但由于只有一个标签数组，因此它们会针对第二个数据集重复出现，并显示在鼠标悬停文本上。

var config = {
  type: 'doughnut',
  data: {
    datasets: [
      {
        data: [124,231,152,613,523],
        backgroundColor: [chartColors.red, chartColors.orange, chartColors.yellow, chartColors.green, chartColors.blue],
        label: 'Offices'
      },
      {
        data: [60,64,100,131,71,81,337,276,405,118],
        backgroundColor: [chartColors.purple, chartColors.grey],
        label: 'Permanent/Contract'
      }
    ],
    labels: ['London', 'New York', 'Paris', 'Moscow', 'Mumbai']
  }
};

var ctx = document.getElementById('employees-graph').getContext('2d');
var employeesGraph = new Chart(ctx, config);

是否可以为永久/合同数据集指定第二个标签数组，以便悬停文本显示第二个

的值

Answer 1

将labels数组添加到两个数据集

var config = {
  type: 'doughnut',
  data: {
    datasets: [
      {
        data: [124,231,152,613,523],
        backgroundColor: [chartColors.red, chartColors.orange, chartColors.yellow, chartColors.green, chartColors.blue],
        label: 'Offices',
        labels: ['London', 'New York', 'Paris', 'Moscow', 'Mumbai']
      },
      {
        data: [60,64,100,131,71,81,337,276,405,118],
        backgroundColor: [chartColors.purple, chartColors.grey],
        label: 'Permanent/Contract',
        labels: ['aaa', 'bbb', 'ccc', 'ddd', 'eee']
      }
    ]
  }
};

并在选项中添加以下内容：

options: {
      tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
            var dataset = data.datasets[tooltipItem.datasetIndex];
            var index = tooltipItem.index;
            return dataset.labels[index] + ': ' + dataset.data[index];
          }
        }
      }

如何在Chart.js圆环图表中添加第二组标签？

1 个答案: