带有图例的ChartJS条形图，对应于每个条形图-Java 学习之路

我试图在条形图上理解ChartJS文档 . 它并没有对我有意义，因为一旦感觉顶部的标签看起来好像只适用于第一个条（基于颜色），而在另一种意义上，它适用于整个图表（它是唯一的标签）不在工具提示中，它是前面和中心）

bar chart demo

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

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

我想要一个顶部的传说，表示浅绿色是苹果，灰色是橙色，绿色是梨等，但我最接近的是提供 data.datasets 一个对象数组并制作标签和数组，这只是结果在一组条形图中，例如here .

1 回答

这样做的方法是在数据集中创建多个项目，每个项目只有一个类别的数据 . 您可以拥有一个名为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>

回复于 2024-05-15T19:05:51+08:00

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

1 回答

相关问题