Chart.js每个数据集有不同标签的折线图
Chart.js Line-Chart with different Labels for each Dataset
使用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中可能吗?
我今天也有一场战斗。您需要更具体地处理您的数据集。在折线图中,"数据集"是一个数组,数组中的每个元素代表图表上的一条线。chart。js其实很灵活。您可以将一条线(数据集元素)绑定到x轴和/或y轴上,您可以详细指定每个轴。
在你的例子中,如果我们坚持在图表上使用一条线,并且你希望条目的"时间"部分沿着底部(x轴),那么你所有的时间都可以进入"标签"数组,而你的"数字"将被精确地指向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轴上绘制自己,而不仅仅是一个原始数字。你现在可以按照这个模式在datassets数组中放置另一个数据集对象,并有两条线,显然给你的线不同的颜色和名称("label")。
我找到了一个很好的解决方案: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];
}
}
}
既然你的帖子里有很多问题,我会试着帮你解决至少其中的一些。对于带有数字和时间的入口模型,您应该创建一个散点图。在这里,使用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
}
}],
}
}
});
- 用与线条相同的颜色填充多折线图上的点
- 跟踪jqplot垂直折线图的鼠标位置
- Morris.js折线图x轴标签在调整大小后消失
- D3在转换时退出多个系列折线图标签
- n3折线图x轴标签
- 在 D3.js折线图中使用 IMG 而不是文本标签
- 需要帮助从数组制作折线图,我想要自定义刻度标签
- 如何在剑道 UI 折线图中对齐类别标签
- 在折线图上隐藏 D3 中的刻度标签
- 图表.js折线图,如果数据相同,如何隐藏y轴开始和结束标签
- gRaphael折线图:用JSON数据填充弹出标签而不是x&y坐标
- 有没有一种方法可以动态地将带有标签的多行插入ChartJS折线图中
- Chartjs示例折线图设置没有't显示数据标签
- 如何在Google Visualization API中格式化折线图上的水平轴标签
- 折线图,当数据小于最小值时,在图内显示数据标签
- 在Google折线图API中使用字符串作为标签
- RGraph折线图X轴标签按月对年分组
- 如何在Shield UI JavaScript折线图中添加自定义标签
- 更改图表.js折线图中的 x 轴标签
- Chart.js每个数据集有不同标签的折线图