作者:牛奶姆姆_592 | 来源:互联网 | 2023-02-07 17:23
我需要显示我认为是一个非常常见的用例:一个折线图,显示例如一周的每日和每小时平均值.
一个数据集显然有7个数据点,另一个有168个数据点.
我无法找到允许这样做的示例或文档选项.当然 - 我几乎可以配置任何外观和感觉,但是当涉及到数据大小时,两个数据集都应该有与标签一样多的数据点.
我想只为数据点较少的数据集(在本例中为每日平均值)设置标签,而另一个(168个数据点)只绘制一条细线,不应在图表中添加其他值(没有垂直条)等等.)
Chart.js有可能吗?
1> jordanwillis..:
只要至少有一个数据集可以使用备用散点图数据集表示,您实际上可以使用chart.js进行描述.让我向您介绍一个示例,其中我将每日平均值显示为条形图,将每小时平均值显示为一条线(也称为混合图表类型).
首先,为每周的每一天配置带有标签的条形图,并将数据的每日平均值作为第一个数据集.
接下来,创建另一个数据集,但将其type
属性设置为'line'
.由于我们希望使用不同的X轴和不同的标签集,因此您必须使用{x: 0, y: 2}
表示法表达数据.这将允许您规避使用上面定义的标签的比例.
最后,在您的options.scales
配置中,定义2个xAxes
比例并将您的第二个数据集与第二个X轴比例关联(同时将其display
属性设置为,false
以便您不会看到任何第二个比例).
最终得到的图表配置如下所示.
var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
datasets: [{
type: 'bar',
label: 'Daily Avg',
backgroundColor: chartColors.red,
data: dailyAvgData,
borderColor: 'white',
borderWidth: 2
}, {
type: 'line',
label: 'Hourly Avg',
borderColor: chartColors.green,
backgroundColor: chartColors.green,
borderWidth: 1,
fill: false,
pointRadius: 0,
xAxisID: 'x-axis-2',
data: hourlyAvgData
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js - Combo Chart With Multiple Scales (X Axis)'
},
tooltips: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{}, {
id: 'x-axis-2',
type: 'linear',
position: 'bottom',
display: false,
}],
yAxes: [{
ticks: {
min: 0,
max: 50
}
}]
}
}
});
您可以在此codepen中看到它的运行情况.
这是另一个例子,但不是使用组合图(每日是柱,每小时是线),两个图都是线.方法完全相同,只是图表类型从更改bar
为line
.
请注意,在此版本中,我已将每日平均线调整为1,以便将点绘制在"当天结束".前面的例子显示了每天开始时的每日平均值(这在技术上是不正确的).
这是一个示例代码,用于演示图表的行版本.