如何创建具有不同标签的多线图
How to create a multiline graph with differents labels
我需要创建一个图表,其中包含来自不同站点的不同价格,而不是同时进行。实际上我正在使用 javascript 库 chart.js。我想知道是否可以在同一个日期有不同的点数不同?
"{
"site1":[
{
"datetime":"2019-01-09 14:43:58",
"price":"649.99"
},
{
"datetime":"2019-01-09 14:44:17",
"price":"649.99"
},
{
"datetime":"2019-01-09 15:02:59",
"price":"649.99"
},
{
"datetime":"2019-01-09 15:05:43",
"price":"649.99"
},
{
"datetime":"2019-01-09 15:08:52",
"price":"649.99"
},
{
"datetime":"2019-01-09 15:16:51",
"price":"649.99"
}
],
"site2":[
{
"datetime":"2019-01-09 15:03:05",
"price":"0"
},
{
"datetime":"2019-01-09 15:05:52",
"price":"804.91"
},
{
"datetime":"2019-01-09 15:09:00",
"price":"804.91"
},
{
"datetime":"2019-01-09 15:16:58",
"price":"804.91"
}
]
}"
这是图表的数据示例。
对不起,如果我的解释不简单。
谢谢
这可以在绘制时间图表时使用 Chart.js + Moment.js 来实现。
查看下面的代码或 fiddle -> http://jsfiddle.net/goz3jehy/4/
var config = {
type: 'line',
data: {
datasets: [{
label: "site1",
backgroundColor: 'red',
borderColor: 'pink',
fill: false,
data: [{
x: '2019-01-09 14:43:58',
y: 649.99
},
{
x: '2019-01-09 14:44:17',
y: 649.99
},
{
x: "2019-01-09 15:02:59",
y: 649.99
},
{
x: "2019-01-09 15:05:43",
y: 649.99
},
{
x: "2019-01-09 15:08:52",
y: 649.99
},
{
x: "2019-01-09 15:16:51",
y: 700
}
],
},
{
label: "site2",
backgroundColor: 'orange',
borderColor: 'yellow',
fill: false,
data: [{
x: "2019-01-09 15:03:05",
y: 0
},
{
x: "2019-01-09 15:05:52",
y: 804.91
},
{
x: "2019-01-09 15:09:00",
y: 804.91
},
{
x: "2019-01-09 15:16:58",
y: 804.91
}
],
}
]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
}
}],
},
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
是的,这可以通过使用 time axis. You'll need to remodel your data to fit the required input format; an example of this is in the snippet below using forEach
.
重要的是要注意 Chart.js 需要 Moment.js 进行日期时间处理。确保在 Chart.js 之前包含 Moment.js,或使用 Chart.js bundled build.
let j = {
"site1": [{
"datetime": "2019-01-09 14:43:58",
"price": "649.99"
},
{
"datetime": "2019-01-09 14:44:17",
"price": "649.99"
},
{
"datetime": "2019-01-09 15:02:59",
"price": "649.99"
},
{
"datetime": "2019-01-09 15:05:43",
"price": "649.99"
},
{
"datetime": "2019-01-09 15:08:52",
"price": "649.99"
},
{
"datetime": "2019-01-09 15:16:51",
"price": "649.99"
}
],
"site2": [{
"datetime": "2019-01-09 15:03:05",
"price": "0"
},
{
"datetime": "2019-01-09 15:05:52",
"price": "804.91"
},
{
"datetime": "2019-01-09 15:09:00",
"price": "804.91"
},
{
"datetime": "2019-01-09 15:16:58",
"price": "804.91"
}
]
},
k = Object.keys(j),
datasets = [];
// remodel the data so it can be provided direct to Chart.js
k.forEach(function(val) {
let d = {
label: val,
data: []
};
j[val].forEach(function(val2) {
d.data.push({
x: val2.datetime,
y: val2.price
});
});
datasets.push(d);
});
// create the chart.
new Chart(document.getElementById('canvas'), {
type: 'line',
data: {
datasets: datasets
},
options: {
scales: {
xAxes: [{
type: 'time'
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<canvas id="canvas"></canvas>
我需要创建一个图表,其中包含来自不同站点的不同价格,而不是同时进行。实际上我正在使用 javascript 库 chart.js。我想知道是否可以在同一个日期有不同的点数不同?
"{
"site1":[
{
"datetime":"2019-01-09 14:43:58",
"price":"649.99"
},
{
"datetime":"2019-01-09 14:44:17",
"price":"649.99"
},
{
"datetime":"2019-01-09 15:02:59",
"price":"649.99"
},
{
"datetime":"2019-01-09 15:05:43",
"price":"649.99"
},
{
"datetime":"2019-01-09 15:08:52",
"price":"649.99"
},
{
"datetime":"2019-01-09 15:16:51",
"price":"649.99"
}
],
"site2":[
{
"datetime":"2019-01-09 15:03:05",
"price":"0"
},
{
"datetime":"2019-01-09 15:05:52",
"price":"804.91"
},
{
"datetime":"2019-01-09 15:09:00",
"price":"804.91"
},
{
"datetime":"2019-01-09 15:16:58",
"price":"804.91"
}
]
}"
这是图表的数据示例。
对不起,如果我的解释不简单。
谢谢
这可以在绘制时间图表时使用 Chart.js + Moment.js 来实现。
查看下面的代码或 fiddle -> http://jsfiddle.net/goz3jehy/4/
var config = {
type: 'line',
data: {
datasets: [{
label: "site1",
backgroundColor: 'red',
borderColor: 'pink',
fill: false,
data: [{
x: '2019-01-09 14:43:58',
y: 649.99
},
{
x: '2019-01-09 14:44:17',
y: 649.99
},
{
x: "2019-01-09 15:02:59",
y: 649.99
},
{
x: "2019-01-09 15:05:43",
y: 649.99
},
{
x: "2019-01-09 15:08:52",
y: 649.99
},
{
x: "2019-01-09 15:16:51",
y: 700
}
],
},
{
label: "site2",
backgroundColor: 'orange',
borderColor: 'yellow',
fill: false,
data: [{
x: "2019-01-09 15:03:05",
y: 0
},
{
x: "2019-01-09 15:05:52",
y: 804.91
},
{
x: "2019-01-09 15:09:00",
y: 804.91
},
{
x: "2019-01-09 15:16:58",
y: 804.91
}
],
}
]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
}
}],
},
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
是的,这可以通过使用 time axis. You'll need to remodel your data to fit the required input format; an example of this is in the snippet below using forEach
.
重要的是要注意 Chart.js 需要 Moment.js 进行日期时间处理。确保在 Chart.js 之前包含 Moment.js,或使用 Chart.js bundled build.
let j = {
"site1": [{
"datetime": "2019-01-09 14:43:58",
"price": "649.99"
},
{
"datetime": "2019-01-09 14:44:17",
"price": "649.99"
},
{
"datetime": "2019-01-09 15:02:59",
"price": "649.99"
},
{
"datetime": "2019-01-09 15:05:43",
"price": "649.99"
},
{
"datetime": "2019-01-09 15:08:52",
"price": "649.99"
},
{
"datetime": "2019-01-09 15:16:51",
"price": "649.99"
}
],
"site2": [{
"datetime": "2019-01-09 15:03:05",
"price": "0"
},
{
"datetime": "2019-01-09 15:05:52",
"price": "804.91"
},
{
"datetime": "2019-01-09 15:09:00",
"price": "804.91"
},
{
"datetime": "2019-01-09 15:16:58",
"price": "804.91"
}
]
},
k = Object.keys(j),
datasets = [];
// remodel the data so it can be provided direct to Chart.js
k.forEach(function(val) {
let d = {
label: val,
data: []
};
j[val].forEach(function(val2) {
d.data.push({
x: val2.datetime,
y: val2.price
});
});
datasets.push(d);
});
// create the chart.
new Chart(document.getElementById('canvas'), {
type: 'line',
data: {
datasets: datasets
},
options: {
scales: {
xAxes: [{
type: 'time'
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<canvas id="canvas"></canvas>