Chart.js 同一标签的多列数据

Question

我正在使用 Chart.js 2.7，我想为同一个标签显示多列数据。例如，我想要一个以一年中的月份作为标签的图表，但要显示每个月的每一天的数字，而不是每月的数字。因此，对于单个标签，我将拥有大约 30 列数据。

这可能吗？

Answer 1

这听起来像是一个分组条形图。这是一个使用 RGraph (https://www.rgraph.net) 来显示它的示例：

https://www.rgraph.net/fiddle/view.html/a-grouped-bar-chart-example

虽然您拥有的数据量构成了一个非常宽的图表（12x30 条），但在这里您有一个 5000 像素宽的画布，它位于一个 1000 像素的 DIV 标签内，该标签的 CSS 溢出设置为自动（这样您获得一个滚动条）。

这是该页面的代码：

包括库：

<script src="/libraries/RGraph.common.core.js"></script>
<script src="/libraries/RGraph.bar.js"></script>

在你的 HTML 中定义 canvas 标签：

<div style="width: 1000px; overflow: auto">
    <canvas id="cvs" width="5000" height="250">[No canvas support]</canvas>
</div>

以及制作图表的代码：

var bar = new RGraph.Bar({
    id: "cvs",
    data: [
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // January
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], // February
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // March
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], // April
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // May
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], // June
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // July
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], // August
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // September
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2], // October
        [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], // November
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2]  // December
    ],
    options: {
        colors: ['red'],
        shadow: false,
        labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
    }
}).draw();