Chart.js js使用不同的标签操作图表中的每个条形图

有人知道这是否可能吗？基本上，我希望图表有标签，例如[Jan，Feb，March]，我希望能够打开和关闭这些值。看起来很简单，但证明有问题。

您可以为每个条创建单独的

数据集

，并以点格式定义

数据

，如下所示：

data: [{ x: 1, y: 16 }]

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

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

每次

数据集

的

隐藏

状态更改时，需要以编程方式收集和定义第二个x轴上的

标签。这可以通过。API提供了可用于执行自定义代码的不同挂钩。在您的情况下，可以使用
beforeloayout
hook

plugins: [{
  beforeLayout: chart => chart.chart.options.scales.xAxes[1].labels = chart.chart.data.datasets.filter(ds => !ds._meta[0].hidden).map(ds => ds.label)
}]

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


新图表（document.getElementById（'Chart'）{
类型：'bar'，
插件：[{
beforeLayout:chart=>chart.chart.options.scales.xAxes[1]。labels=chart.chart.data.datasets.filter（ds=>！ds.\U meta[0]。hidden）。map（ds=>ds.label）
}],
数据：{
数据集：[{
标签：“A”，
数据：[{x:1，y:16}]，
背景颜色：“rgba（255,99,132,0.2）”，
边框颜色：“rgb（255，99，132）”，
边框宽度：1，
类别类别：1
},
{
标签：‘B’，
数据：[{x:2，y:22}]，
背景颜色：“rgba（255、159、64、0.2）”，
边框颜色：“rgb（255、159、64）”，
边框宽度：1，
类别类别：1
},
{
标签：‘C’，
数据：[{x:3，y:18}]，
背景颜色：“rgba（255205860.2）”，
边框颜色：“rgb（25520586）”，
边框宽度：1，
类别类别：1
},
{
标签：“D”，
数据：[{x:4，y:13}]，
背景颜色：“rgba（751921920.2）”，
边框颜色：“rgb（75192192）”，
边框宽度：1，
类别类别：1
},
{
标签：“E”，
数据：[{x:5，y:5}]，
背景颜色：“rgba（54162235,0.2）”，
边框颜色：“rgb（54162235）”，
边框宽度：1，
类别类别：1
},
{
标签：“F”，
数据：[{x:6，y:16}]，
背景颜色：“rgba（153102255,0.2）”，
边框颜色：“rgb（153102255）”，
边框宽度：1，
类别类别：1
},
]
},
选项：{
工具提示：{
回调：{
标题：（）=>未定义
}
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}],
xAxes：[{
显示：假
},
{
对,，
网格线：{
显示：假
}
}
]
}
}
});

Chart.js v2中的一个相关答案可能会有所帮助：@u根据您对另一个问题的回答，我现在在哪里，但我希望[A B C D E]标记在每个Bart的下方。第一个链接指向使用自定义HTML图例的答案。这很复杂，但应该能解决你的问题。