我正试图在一个ZingChart图表上绘制两个线形图,并努力弄清楚应该以哪种格式传递数据。
基本上,我有一个时间戳/整数对数组,用于今天和一周前的数据,间隔为一小时,例如:
今天= [[timestamp1, 1], [timestamp2 4],……, [timestamp18, 7]] <——假设现在是下午6点,那么当天剩下的时间没有数据
week_ago = [[timestamp1 4], [timestamp2 7],……, [timestamp23, 1]] <——完整的24小时数据
x系列应该显示00:00到23:00之间的小时数,y系列只是整数。此外,在每个图形点上,我希望工具提示显示日期和整数值。
这听起来很简单,可能是这样,但因为我对ZingChart很陌生,所以我不明白。
Thanks to lot
这就是你想要做的吗?我使用两个series
对象来包含我的数据:第一个包含今天的时间序列数据,第二个包含上周的时间序列数据。这里有更多关于时间序列数据和尺度的信息。
接下来,我创建了两个x轴尺度。scaleX
绑定到第一个系列对象(今天的数据),scaleX2
绑定到第二个系列对象(或上周的数据)。您可以选择"混合"两个尺度,以便它们出现在同一轴线上(但这通常在y轴上完成)。或者您可以关闭第二个x轴的可见性,这就是我在下面的演示中所做的。
你当然可以使用工具提示(在这个演示中是关闭的)、准星和/或图例来进一步解释你的数据。
var myConfig = {
type: 'line',
utc: true, //If set to false, this will default to UTC time.
timezone: -5, //Currently set to EST time. You can specify your desired time zone.
scaleX: {
minValue: 1471496400000,
maxValue: 1471579200000,
step: 'hour',
transform: {
type: 'date',
all: '%g%a'
},
label: {
text: 'X-Axis'
},
item: {
fontSize: 10
},
maxItems: 24
},
scaleX2: {
minValue: 1470891600000,
maxValue: 1470974400000,
placement: 'default',
blended: true,
visible: false,
step: 'hour',
transform: {
type: 'date',
all: '%g%a'
},
item: {
fontSize: 10
},
},
scaleY: {
values: '0:10:1',
label: {
text: 'Y-Axis'
},
item: {
fontSize: 10
},
guide: {
lineStyle: 'solid'
}
},
plot: {
tooltip: {
visible: false
}
},
crosshairX: {
plotLabel: {
multiple: true
}
},
series: [
{ //Today, or 08/18/16 until 6am
scales: 'scaleX, scaleY',
values: [
[1471496400000, 3], //08/18/16 at midnight, EST time
[1471500000000, 7], //1am
[1471503600000, 5], //2am
[1471507200000, 9], //3am
[1471510800000, 4], //4am
[1471514400000, 5], //5am
[1471518000000, 2] //6am
],
text: 'Today'
},
{ //Last Thursday, or 08/11/16, all 24 hours
scales: 'scaleX2, scaleY',
values: [
[1470891600000, 5], //08/11/16 at midnight, EST time
[1470895200000, 6], //1am
[1470898800000, 4], //2am
[1470902400000, 9], //3am
[1470906000000, 1], //4am
[1470909600000, 5], //5am
[1470913200000, 6], //6am
[1470916800000, 3], //7am
[1470920400000, 5], //8am
[1470924000000, 7], //9am
[1470927600000, 8], //10am
[1470931200000, 2], //11am
[1470934800000, 3], //12am
[1470938400000, 1], //1pm
[1470942000000, 4], //2pm
[1470945600000, 6], //3pm
[1470949200000, 7], //4pm
[1470952800000, 3], //5pm
[1470956400000, 5], //6pm
[1470960000000, 6], //7pm
[1470963600000, 2], //8pm
[1470967200000, 3], //9pm
[1470970800000, 5], //10pm
[1470974400000, 4] //11pm
],
text: 'Last Week'
}
],
legend: {
align: 'center',
verticalAlign: 'bottom',
marker: {
type: 'circle',
size: 4,
showLine: true
},
borderWidth: 1
}
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
希望有帮助。我是ZingChart团队的一员,如果你还有问题可以告诉我。熟悉我们的scale教程将为您使用我们的库打下良好的基础。