每个数据集具有不同标签的Chart.js折线图
使用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可以做到这一点吗？
回答 3
Stack Overflow用户
发布于 2016-09-09 16:02:39
我今天也与此作了一场斗争。您需要更具体地了解您的数据集。在折线图中，“数据集”是一个数组，数组中的每个元素代表图表上的一条线。一旦你解决了这个问题，Chart.js实际上是非常灵活的。您可以将直线(数据集元素)绑定到x轴和/或y轴，您可以详细指定这两个轴。
在你的例子中，如果我们只使用图表上的一条线，而你希望条目的"time“部分沿着底部(x轴)，那么你所有的时间都可以进入"labels”数组，而你的"number“将在y轴上精确指向。为了保持简单，不使用x和y轴指定我们自己的比例，并给出以下数据：
var MyData = [{time:"10:00", number: "127"},
{time:"11:00", number: "140"},
{time:"12:00", number: "135"},
{time:"13:00", number: "122"}];您可以将图表的"data“属性设置为：
var data = {
labels: ["10:00", "11:00", "12:00", "13:00"],
datasets: [
{
label: "My First dataset",
// Insert styling, colors etc here
data: [{x: "10:00", y: 127},
{x: "11:00", y: 140},
{x: "12:00", y: 135},
{x: "13:00", y: 122}]
}
]};注意，数据数组现在更具体了，每个数据元素都通过引用一个标签而不只是一个原始数字在x轴上绘制自己。现在，您可以将另一个dataset对象放入遵循此模式的datasets数组中，并具有两行，显然为您的行指定了不同的颜色和名称("label")。
希望这能有所帮助。
Stack Overflow用户
发布于 2019-12-23 12:19:11
我在这里找到了一个非常好的解决方案：https://github.com/chartjs/Chart.js/issues/3953
基本上，您可以将自己的“labels”属性添加到每个数据集，并在xAxes标签、工具提示或任何您喜欢的内容的回调中利用它。
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [1, 2, 3, 4, 5],
backgroundColor: [
'green',
'yellow',
'red',
'purple',
'blue',
],
labels: [
'green',
'yellow',
'red',
'purple',
'blue',
]
}, {
data: [6, 7, 8],
backgroundColor: [
'black',
'grey',
'lightgrey'
],
labels: [
'black',
'grey',
'lightgrey'
],
},]
},
options: {
responsive: true,
legend: {
display: false,
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ': ' + dataset.data[index];
}
}
}
}
});这里最重要的是这一点：
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ': ' + dataset.data[index];
}
}
}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
}
}],
}
}
});https://stackoverflow.com/questions/38101859
复制相似问题
腾讯云开发者
