每个数据集具有不同标签的Chart.js折线图
每个数据集具有不同标签的Chart.js折线图
提问于 2016-06-29 21:58:35
使用Chart.js，您可以创建折线图，为此，您必须私有标签和数据集。例如：
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};这里的问题是，您有固定数量的标签(在本例中为7个)，并且还需要为每个数据集提供7个数据条目。现在，如果您有未知数量的标签和数据条目怎么办？
如果一个数据条目包含一个数字和一个时间，该怎么办：
Entry {
number: 127
time: 10:00
}如果您想要显示X轴上的所有时间和Y轴上的所有数字，并按X轴上的时间排序，该怎么办？使用Chart.js可以做到这一点吗？
Stack Overflow用户
发布于 2016-09-08 16:00:39
由于您的帖子中有许多问题，我将至少尝试帮助解决其中的一些问题。如果你的入口模型有一个数字和一个时间，你应该创建一个散点图。在这里，您使用x和y值定义数据对象，如下面的示例所示。它要求每个条目x都有一个对应的y。看一下散点图。http://www.chartjs.org/docs/#line-chart-scatter-line-charts
var d = new Date();
var scatterChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: new Date().setDate(d.getDate()-5),
y: 0
}, {
x: new Date(),
y: 10
}, {
x: new Date().setDate(d.getDate()5),
y: 5
}]
}]
},
options: {
scales: {
xAxes: [{
type: "time",
time: {
format: "HH:mm",
unit: 'hour',
unitStepSize: 2,
displayFormats: {
'minute': 'HH:mm',
'hour': 'HH:mm'
},
tooltipFormat: 'HH:mm'
},
gridLines: {
display: false
}
}],
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38101859
复制相关文章
相似问题
腾讯云开发者
