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条），所以这里你有一个5000px宽的画布，它位于1000px DIV标签内，CSS溢出设置为auto（所以你得到一个滚动条。）

这是该页面的代码：

包括库：

<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();

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

1 个答案: