Question

我正在尝试在一个ZingChart图表上绘制两个折线图，并努力弄清楚我应该以何种格式传递数据。

基本上，我有一个时间戳/整数对数组，用于今天和前一周的数据，间隔一小时，例如：

今天= [[timestamp1,1]，[timestamp2,4]，......，[timestamp18,7]]＆lt; - 假设现在是下午6点，所以当天剩下的时间没有数据

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

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

听起来很简单，可能是因为我对ZingChart很新，我无法理解。

非常感谢

Answer 1

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

接下来，我创建了two x-axis scales。 scaleX与第一个系列对象（今天的数据）相关联，scaleX2与第二个系列对象（或上周的数据）相关联。您可以选择"blend" the two scales so that they appear on the same axis line（但这通常在y轴上完成）。或者你可以关闭第二个x轴的可见性，这就是我在下面的演示中所做的。

您当然可以使用tooltips（在此演示中关闭），crosshairs和/或legend来进一步说明您的数据。

＆＃13;

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
});

＆＃13;

<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id='myChart'></div>
	</body>

＆＃13;

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

如何在一张ZingChart图表上绘制WeekOnWeek图表？

1 个答案: