如何在一个ZingChart图表上绘制WeekOnWeek图形



我正试图在一个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教程将为您使用我们的库打下良好的基础。

相关内容

  • 没有找到相关文章

最新更新