我正在尝试了解有关条形图的 ChartJS 文档。它对我来说没有意义,因为顶部的标签在一次意义上看起来好像只适用于第一个条(基于颜色),而在另一种意义上,整个图表(它是唯一的标签是不在工具提示中,它在前面和中间)
我一直在努力让它更像他们的折线图,它显示了一个带有标签的图例和一个与图表上每条线相关的彩色方 block 。 (他们没有多线图表的示例,但它确实是这样工作的)。
数据对象中的 labels 属性被转换为条形旁边的值,例如 labels: ['36%', '10%', '18%', '34%', '0% ', '2%']
我想要一个顶部的图例,表明浅绿色是苹果,灰色是橙子,绿色是梨等等,但我最接近的是提供 data.datasets
一个对象数组并制作标签和数组,这只会导致条形组,如示例 here .
最佳答案
这样做的方法是在数据集中创建多个项目,每个项目只有一个类别的数据。您可以拥有一个名为 stock 的顶级标签,然后为每种类型创建单独的数据集。
// create a chart.
const ctx = canvas.getContext("2d");
const chart = new Chart(ctx, {
type: "horizontalBar",
data: {
labels: ["Stock"],
datasets: [{
label: "Apples",
backgroundColor: "#AF7",
data: [Math.random() * 100],
},{
label: "Oranges",
backgroundColor: "#FA4",
data: [Math.random() * 100],
},{
label: "Mangos",
backgroundColor: "#FF7",
data: [Math.random() * 100],
},{
label: "Avocados",
backgroundColor: "#2A7",
data: [Math.random() * 100],
}]
},
options: {
responsive: false,
legend: { position: 'top'},
title: { display: true, text: 'Fruit in stock'}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id=canvas height=200 width=500></canvas>
关于javascript - ChartJS 条形图,带有对应于每个条的图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44297428/