无法获得图表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的dataset属性用作图例的文本。

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

var MeSeContext = document.getElementById("MeSeStatusCanvas").getContext("2d");
var MeSeData = {
  labels: [
    "AMER",
    "APAC",
    "EMEA"
  ],
  datasets: [{
      label: ['SFO'],
      data: [23.2, 0, 0],
      backgroundColor: 'red'
    },
    {
      label: ['CHI'],
      data: [6.3, 0],
      backgroundColor: 'brown'
    },
    {
      label: ['INDIA'],
      data: [0, 3, 0],
      backgroundColor: 'green'
    },
    {
      label: ['ANZ'],
      data: [0, 7, 0],
      backgroundColor: 'lightgreen'
    }
  ]
};

var MeSeChart = new Chart(MeSeContext, {
  type: 'horizontalBar',
  data: MeSeData,
  options: {
    responsive: true,
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true,

      }]
    }
  }
});