[英]zingcharts using time as x axis with multiple lines
因此,我正在尝试绘制一个看起来很独特的情况。 我想将时间用作我的x轴比例,并且将绘制2-5条线,每条线在数据点之间的时间不同。 我正在使用zingcharts,它们在常规比例尺元素上有一些不错的文档 ,但是我不知道这是否有可能。
现在,它们以相同的时间步进行绘制,然后数据点较少(点之间的时间较长)的数据点变短了,并且没有以真实的方式显示。 当我只有一个图表并使用该数据的时间戳时,它工作正常,但对于两个图表却无效。
这是我需要在后端处理的事情,还是可以在前端的Zingcharts中完成?
这是我的单个剧情的javascript,效果很好。 我是否需要更改此值以在多个绘图中考虑上述时间比例?
var myChart=
{
"type": "line",
"title":{
"text":" value over time --- 38 data points"
},
"legend": {},
"tooltip": {},
"crosshair-x":{},
"plot": {
"valueBox": {
"type": "max, min",
"placement": "top",
"visible" : false
}
},
"scaleX": {
"label": {
"text": "Time",
},
"values" : [ 1418947599.0, 1418947599.0, 1418947599.0, 1418947599.0, 1418947599.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, 1418947600.0, ],
"zooming" : true,
},
"scaleY": {
"label": {
"text": "Value"
},
"zooming" : true,
},
"series": [
{
"text" : "sim data - raw value",
"values": [-0.31408204379961535, -0.3140820437996114, -0.3140820437996066, -0.3140820437996098, -0.3140820437996114, -0.31408204379960986, -0.314082043799613, -0.3140820437996122, -0.3140820437996098, -0.31408204379960664, -0.31408204379960825, -0.3140820437996067, -0.3140820437996083, -0.3140820437996114, -0.3140820437996098, -0.3140820437996154, -0.3140820437996114, -0.3140820437996123, -0.31408204379960586, -0.31408204379960913, -0.3140820437996099, -0.31408204379960825, -0.3140820437996098, -0.31408204379960664, -0.3140820437996098, -0.3140820437996114, -0.31408204379960825, -0.31408204379960986, -0.314082043799605, -0.3140820437996099, -0.31408204379960974, -0.3140820437996113, -0.31408204379961147, -0.31408204379960664, -0.3140820437996083, -0.31408204379960997, -0.3140820437996083, -0.31408204379961135]
},
]
};
window.onload=function(){
zingchart.render({
id:"myChartDiv",
data:myChart,
height:600,
width:"100%"
});
};
卢克是正确的。 您可以使用[X,Y]你的价值观阵列中的值对,也可以与其他系列分配给另一个尺度xn的对象,看到这里 。
分别配置scale-x,scale-x-2和scale-xn对象,并使用“ scales”属性在每个系列对象中进行设置:
"series":[
{
"values": [-0.31408204379961535, -0.3140820437996114, -0.3140820437996066, -0.3140820437996098, -0.3140820437996114, -0.31408204379960986, -0.314082043799613, -0.3140820437996122, -0.3140820437996098, -0.31408204379960664, -0.31408204379960825, -0.3140820437996067, -0.3140820437996083, -0.3140820437996114, -0.3140820437996098, -0.3140820437996154, -0.3140820437996114, -0.3140820437996123, -0.31408204379960586, -0.31408204379960913, -0.3140820437996099, -0.31408204379960825, -0.3140820437996098, -0.31408204379960664, -0.3140820437996098, -0.3140820437996114, -0.31408204379960825, -0.31408204379960986, -0.314082043799605, -0.3140820437996099, -0.31408204379960974, -0.3140820437996113, -0.31408204379961147, -0.31408204379960664, -0.3140820437996083, -0.31408204379960997, -0.3140820437996083, -0.31408204379961135],
"scales":"scale-x,scale-y"
},
{
"values": [-0.31408204379961535, -0.3140820437996114, -0.3140820437996066, -0.3140820437996098, -0.3140820437996114, -0.31408204379960986, -0.314082043799613, -0.3140820437996122, -0.3140820437996098, -0.31408204379960664, -0.31408204379960825, -0.3140820437996067, -0.3140820437996083, -0.3140820437996114, -0.3140820437996098],
"scales":"scale-x-2,scale-y"
}
]
需要注意的几件事:
ZingChart使用时间戳(以毫秒为单位),因此您应该在时间戳上添加3个额外的0。
您的scale-x值似乎重复了很多,因此,如果您使用[x,y]值对方法,则可能会看到一些时髦的结果。 是否应该在单个序列中每个点之间存在时间间隔,或者每个时间戳都需要绘制多个值?
这是我第一次尝试使用ZingCharts时遇到的麻烦。 但是答案实际上很简单:
"values": [[x,y],[x,y],...],
要么:
"series": [{"values": [[timestamp,value],[timestamp,value],...]},
{"values": [[timestamp,value],[timestamp,value],...]}]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.