Javascript 如何在Chart.js 2.1.6中的图例中显示条形标签？

我正在使用Chart.js创建图表，我想在图例中显示条形图的标签，而不是数据集的标题（只有一个），请参见下图作为示例：

我当前的传奇如下所示：

我已经看了这些文件，但是没有用，我发现它们实际上很混乱

这是我目前的代码：

var chart_0 = new Chart($('#cp_chart_0'), {
      type: 'bar'
    , data: {
          labels: ['Blue','Green','Yellow','Red','Purple','Orange']
        , datasets: [{
              label: 'Dataset 1'
            , borderWidth: 0
            , backgroundColor: ['#2C79C5','#7FA830','#7B57C3','#ED4D40','#EC802F','#1DC6D3']
            , data: ['12','2','5','0','9','1']
        }]
      }
});

---

谢谢

最简单的方法是为您的数据提供多个集合：

  data: {
      labels: ['total votes']
    , datasets: [{
          label: 'Blue'
        , backgroundColor: ['#2C79C5']
        , data: ['12']
    },{
          label: 'Green'
        , backgroundColor: ['#7FA830']
        , data: ['2']
    },
    ...
    ]
  }

但您可以使用

generateLabels

-

---

甚至可以使用

legendCallback

-

自定义整个图例（包括格式），在Chart.js 2.1.x的最新版本中，他们又添加了此功能。所以先去看看最新的版本吧。然后在下面插入代码

它位于选项和图例下。以下是您如何使用它：

options: {
    legend: {
        position: 'right'
    }
}

---

此解决方案使用Chart.js版本3。您可以使用来预处理数据。API提供了可用于执行自定义代码的不同挂钩

我使用

beforeInit

钩子为每个定义的标签/值对创建单独的数据集。请注意，这些新数据集的

数据

是以点格式定义的（例如

[{x:1，y:12}]

）：

此外，还需要定义第二个x轴，该轴将包含标签

x1: {
  offset: true,
  gridLines: {
    display: false
  }
}

每当

数据集

的

隐藏

状态更改时，需要以编程方式收集和定义

x1

上的

标签。这可以在
beforeloayout
hook中完成

beforeLayout: chart => chart.options.scales.x1.labels = chart.config.data.datasets.filter((ds, i) => !chart.getDatasetMeta(i).hidden).map(ds => ds.label)

请看下面的可运行代码，看看它是如何工作的


新图表（“图表”{
类型：'bar'，
插件：[{
beforeInit:chart=>{
让dataset=chart.config.data.datasets[0]；
chart.config.data.datasets=chart.config.data.labels.map（（l，i）=>({
标签：l，
数据：[{x:i+1，y:dataset.data[i]}]，
backgroundColor:dataset.backgroundColor[i]，
类别类别：1
}));
chart.config.data.labels=未定义；
},
beforeLayout:chart=>chart.options.scales.x1.labels=chart.config.data.datasets.filter（（ds，i）=>！chart.getDatasetMeta（i）.hidden.map（ds=>ds.label）
}],
数据：{
标签：[“蓝色”、“绿色”、“黄色”、“红色”、“紫色”、“橙色”]，
数据集：[{
数据：['12'，'2'，'5'，'0'，'9'，'1']，
背景颜色：[“2C79C5”、“7FA830”、“FFF200”、“ED4D40”、“800080”、“EC802F”]
}]
},
选项：{
互动：{
是的，
模式：“最近的”
},
插件：{
图例：{
位置：'右'
},
工具提示：{
回调：{
标题：（）=>未定义
}
}
},   
比例：{
y:{
贝吉纳泽罗：是的
},
x:{
显示：假
},
x1:{
对,，
网格线：{
显示：假
}
}
}
}
});
画布{
最大宽度：400px；
}

太好了，谢谢你的提示！最后，我按照雨果的答案分割成多个数据集，并用
图表0.generateLegend（）
创建了我自己的图例，这样我就有了更多的控制权-但在分割成多个数据集后，这也起到了作用。谢谢！我分成多个集合，然后用
chart\u 0.generateLegend（）
创建了自己的图例，这样我就可以更好地控制它了。
beforeLayout: chart => chart.options.scales.x1.labels = chart.config.data.datasets.filter((ds, i) => !chart.getDatasetMeta(i).hidden).map(ds => ds.label)