使用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有可能吗?
答案 0 :(得分:6)
我今天也和这场战斗。 您需要对数据集更具体一些。在折线图"数据集"是一个数组,数组中的每个元素代表图表上的一条线。一旦你完成了,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"}];
您可以设置"数据"您图表的属性为:
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轴上绘制自己。您现在可以在此模式后面的数据集数组中放置另一个数据集对象,并且有两行,显然会为您的行添加不同的颜色和名称("标签")。
希望这有帮助。
答案 1 :(得分:3)
由于您的帖子中有很多问题,我会尝试至少帮助其中一些问题。对于带有数字和时间的Entry模型,您应该创建一个分散的图形。在这里,您可以使用x和y值定义数据对象,如下面的示例所示。它要求每个条目x具有相应的y。 看一下散点图。 http://www.chartjs.org/docs/#line-chart-scatter-line-charts
void __fastcall TForm1::Button1Click(TObject *Sender)
{
try
{
throw Exception("test");
}
catch(Exception &)
{
throw;
}
}
答案 2 :(得分:1)
我在这里找到了一个非常好的解决方案:https://github.com/chartjs/Chart.js/issues/3953
基本上,您可以在每个数据集中添加自己的“标签”属性,并在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];
}
}
}