如何向 Chart.js 圆环图添加第二组标签？答案

【问题标题】：How to add a second set of labels to a Chart.js doughnut chart?如何向 Chart.js 圆环图添加第二组标签？
【发布时间】：2018-04-26 12:47:37
【问题描述】：

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

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

图形选项的“标签”属性包含办公室的名称，但由于只有一个标签数组，因此它们在第二个数据集上重复出现，并出现在它的鼠标悬停文本上。

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);

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

【问题讨论】：

标签： chart.js

【解决方案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];
      }
    }
  }
}

【讨论】：