我正在使用 Chart.js 2.7,我想为同一个标签显示多列数据。例如,我想要一个以一年中的月份作为标签的图表,但要显示每个月的每一天的数字,而不是每月的数字。因此,对于单个标签,我将拥有大约 30 列数据。
这可能吗?
我正在使用 Chart.js 2.7,我想为同一个标签显示多列数据。例如,我想要一个以一年中的月份作为标签的图表,但要显示每个月的每一天的数字,而不是每月的数字。因此,对于单个标签,我将拥有大约 30 列数据。
这可能吗?
这听起来像一个分组条形图。这是一个使用 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();