2016-08-18 78 views
7

我想绘制一个ZingChart图表上的两个线图,并努力弄清楚我应该传递什么格式的数据。今天如何在一张ZingChart图表上绘制WeekOnWeek图表?

= [[timestamp1,1],[timestamp2,4],....:

基本上,我有时间戳/整数对今天的阵列,并且一周前一个小时的时间间隔例如数据..,[timestamp18,7]] < - 假设现在是晚上6点,因此当天没有数据

week_ago = [[timestamp1,4],[timestamp2,7],.... ..,[timestamp23,1]] < - 完整的24小时数据

x系列应该在00:00到23:00之间显示小时,y系列只是整数。另外,在每个图形点上,我希望工具提示显示日期和整数值。

这听起来很简单,可能是因为我对ZingChart很陌生,我无法弄清楚。

非常感谢

回答

7

这是你想要做的吗?我用了两个series对象来包含我的数据:第一个包含今天的时间序列数据,第二个包含上周的时间序列数据。有关于time-series data and scales here的更多信息。

接下来,我创建了two x-axis scalesscaleX绑定到第一个系列对象(今天的数据),而scaleX2绑定到第二个系列对象(或上周的数据)。您可以选择"blend" the two scales so that they appear on the same axis line(但这通常在y轴上完成)。或者,您可以关闭第二个x轴的可见性,这是​​我在下面的演示中所做的。

您当然可以使用tooltips(在此演示中关闭),crosshairs和/或legend来进一步解释您的数据。

var myConfig = { 
 
    type: 'line', 
 
    \t utc: true, //If set to false, this will default to UTC time. 
 
    \t timezone: -5, //Currently set to EST time. You can specify your desired time zone. 
 
    \t scaleX: { 
 
    \t minValue: 1471496400000, 
 
    \t maxValue: 1471579200000, 
 
    \t step: 'hour', 
 
    \t transform: { 
 
    \t  type: 'date', 
 
    \t  all: '%g%a' 
 
    \t }, 
 
    \t label: { 
 
    \t  text: 'X-Axis' 
 
    \t }, 
 
    \t item: { 
 
    \t  fontSize: 10 
 
    \t }, 
 
    \t maxItems: 24 
 
    \t }, 
 
    \t scaleX2: { 
 
    \t minValue: 1470891600000, 
 
    \t maxValue: 1470974400000, 
 
    \t placement: 'default', 
 
    \t blended: true, 
 
    \t visible: false, 
 
    \t step: 'hour', 
 
    \t transform: { 
 
    \t  type: 'date', 
 
    \t  all: '%g%a' 
 
    \t }, 
 
    \t item: { 
 
    \t  fontSize: 10 
 
    \t }, 
 
    \t }, 
 
    \t scaleY: { 
 
    \t values: '0:10:1', 
 
    \t label: { 
 
    \t  text: 'Y-Axis' 
 
    \t }, 
 
    \t item: { 
 
    \t  fontSize: 10 
 
    \t }, 
 
    \t guide: { 
 
    \t  lineStyle: 'solid' 
 
    \t } 
 
    \t }, 
 
    \t plot: { 
 
    \t tooltip: { 
 
    \t  visible: false 
 
    \t } 
 
    \t }, 
 
    \t crosshairX: { 
 
    \t plotLabel: { 
 
    \t  multiple: true 
 
    \t } 
 
    \t }, 
 
\t series: [ 
 
\t \t { //Today, or 08/18/16 until 6am 
 
\t \t scales: 'scaleX, scaleY', 
 
\t \t values: [ 
 
\t \t  [1471496400000, 3], //08/18/16 at midnight, EST time 
 
\t \t  [1471500000000, 7], //1am 
 
\t \t  [1471503600000, 5], //2am 
 
\t \t  [1471507200000, 9], //3am 
 
\t \t  [1471510800000, 4], //4am 
 
\t \t  [1471514400000, 5], //5am 
 
\t \t  [1471518000000, 2] //6am 
 
\t \t ], 
 
\t \t text: 'Today' 
 
\t \t }, 
 
\t \t { //Last Thursday, or 08/11/16, all 24 hours 
 
\t \t scales: 'scaleX2, scaleY', 
 
\t \t values: [ 
 
\t \t  [1470891600000, 5], //08/11/16 at midnight, EST time 
 
\t \t  [1470895200000, 6], //1am 
 
\t \t  [1470898800000, 4], //2am 
 
\t \t  [1470902400000, 9], //3am 
 
\t \t  [1470906000000, 1], //4am 
 
\t \t  [1470909600000, 5], //5am 
 
\t \t  [1470913200000, 6], //6am 
 
\t \t  [1470916800000, 3], //7am 
 
\t \t  [1470920400000, 5], //8am 
 
\t \t  [1470924000000, 7], //9am 
 
\t \t  [1470927600000, 8], //10am 
 
\t \t  [1470931200000, 2], //11am 
 
\t \t  [1470934800000, 3], //12am 
 
\t \t  [1470938400000, 1], //1pm 
 
\t \t  [1470942000000, 4], //2pm 
 
\t \t  [1470945600000, 6], //3pm 
 
\t \t  [1470949200000, 7], //4pm 
 
\t \t  [1470952800000, 3], //5pm 
 
\t \t  [1470956400000, 5], //6pm 
 
\t \t  [1470960000000, 6], //7pm 
 
\t \t  [1470963600000, 2], //8pm 
 
\t \t  [1470967200000, 3], //9pm 
 
\t \t  [1470970800000, 5], //10pm 
 
\t \t  [1470974400000, 4] //11pm 
 
\t \t ], 
 
\t \t text: 'Last Week' 
 
\t \t } 
 
\t ], 
 
\t legend: { 
 
\t align: 'center', 
 
\t verticalAlign: 'bottom', 
 
\t marker: { 
 
\t  type: 'circle', 
 
\t  size: 4, 
 
\t  showLine: true 
 
\t }, 
 
\t borderWidth: 1 
 
\t } 
 
}; 
 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 400, 
 
\t width: 600 
 
});
<head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body>

希望有所帮助。我在ZingChart团队,如果您还有其他问题,可以告诉我。熟悉我们的Scales Tutorial应该为您与我们的图书馆合作奠定良好的基础。