无法获得图表js中显示的预期图例

Question

我正在使用图表js创建水平合并条。在这里我可以正确获得输出，但是问题是，对于图例标签，我只能显示1。这是我的输出。

在图表顶部，我们可以看到SFO和CHI图例（这是一种解决方法，或者可能是我的运气，但这并不是我要找的）。与AMER类似，我们有APAC，它也有2种颜色，绿色和浅绿色，绿色表示印度，浅绿色表示ANZ，请问我能得到如AMER所示的图例，也可以建议我一种更好的方法来获得。

这是我的数据。

var MeSeData = {
  labels: [
    "AMER",
    "APAC",
   "EMEA"
  ],
  datasets: [{
      label: ['SFO'],
      data: [23.2, 28.2, 6.1],
      backgroundColor: ['red', 'green', 'blue', 'orange']
    },
    {
      label: ['CHI'],
      data: [6.3, 3],
      backgroundColor: ['lightred', 'lightgreen']
    }
  ]
};

这是我目前的工作fiddle

我正在使用chart.js。请让我知道如何达到此要求。

谢谢！

Answer 1

请阅读文档，以了解如何填充数据。

labels中的所有属性都对应于xAxis在反转时要显示的内容。

数据集中的项目数量与图例相对应，并且每个label的{​​{1}}属性都用作图例的文本。

请按照我对您的问题或小提琴的理解，查看更改代码-> https://jsfiddle.net/bcxzu39v/

dataset