带有图例的ChartJS条形图,对应于每个条形

时间:2017-06-01 02:13:29

标签: javascript canvas charts chart.js

我试图在条形图上了解ChartJS文档。它并没有给我一个感觉记录,因为在一次感觉上顶部的标签看起来好像只适用于第一个条(基于颜色)而在另一种意义上,它适用于整个图表(它是唯一的不在工具提示中的标签,它是正面和中间的)

bar chart demo

我一直在努力使它更像是他们的折线图,它显示了一个带有标签的图例和与图表上每一行相关的彩色方块。 (他们没有得到多线图的例子,但确实如此工作)。

数据对象中的labels属性被转换为条形旁边的值,例如labels: ['36%', '10%', '18%', '34%', '0%', '2%'] bar chart fail

我想要一个顶部的传说,表示浅绿色是苹果,灰色是橙色,绿色是梨等,但最接近我的是提供data.datasets一系列对象制作标签和数组,只产生一组条形,如示例here

1 个答案:

答案 0 :(得分:4)

执行此操作的方法是,在数据集中创建多个项目,每个项目仅包含一个类别的数据。您可以拥有一个名为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>