ChartJS 条形图，带有对应于每个条形图的图例 [英] ChartJS bar chart with legend which corresponds to each bar

问题描述

我正在尝试了解其条形图上的 ChartJS 文档.它对我来说没有意义，因为顶部的标签在某种意义上看起来好像它只适用于第一个条形(基于颜色)，而在另一种意义上，整个图表(它是唯一的标签不在工具提示中，它在前面和中间)

I'm trying to understand the ChartJS documentation on their bar chart. It doesn't make a log of sense to me as the label at the top in once sense looks as though it applies to just the first bar (based on color) and in another sense, the entire chart (it is the only label that's not in a tooltip and it is front and center)

我一直在努力让它更像他们的折线图，它显示了一个带有标签的图例和一个与图表上的每条线相关的彩色方块.(他们没有多线图的例子，但它确实像这样工作).

I've been struggling to make it more like their line chart, which shows a legend with a label and a colored square related to each line on the chart. (they haven't got an example of a multiline chart, but it does work like this).

数据对象中的标签属性被转换为栏旁边的值，例如 labels: ['36%', '10%', '18%', '34%', '0%', '2%']

The labels property within the data object gets translated to the value next to the bar, eg labels: ['36%', '10%', '18%', '34%', '0%', '2%']

我想在顶部有一个图例，表明水色是苹果，灰色是橙色，绿色是梨等，但我最接近的是提供 data.datasets 一个对象数组并制作标签和数组，这只会导致条形组，例如 here.

I want a legend at the top that indicates the aqua color is apples, the grey is oranges, the green is pears, etc, but the closest I've come is providing data.datasets an array of objects and making labels and array, which only results in groups of bars, like the example here.

推荐答案

这样做的方法是在数据集中创建多个项目，每个项目只有一个类别的数据.您可以拥有一个名为 stock 的顶级标签，然后为每种类型创建单独的数据集.

The way to do this, to create multiple items in the datasets, each having data for only one category. You can have one top level label called stock and then create the individual data-sets for each type.

// 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>

这篇关于ChartJS 条形图，带有对应于每个条形图的图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！