使用时间作为具有多条线的 x 轴的 zingcharts

Question

所以我正在尝试做一个相当独特的绘图案例。我想使用时间作为我的 x 轴刻度，我将绘制 2-5 条线，每条线在数据点之间具有不同的时间量。我正在使用 zingcharts，它们在一般比例元素上有一些不错的 documentation，但我不知道这是否可能。

现在他们在相同的时间步上绘制，然后数据点较少（点之间的时间较长）的那个最终更短并且没有以真实的方式显示。当我只有一个图表并使用该数据的时间戳时它工作正常但它不适用于两个。

这是我需要在后端处理的事情还是可以在前端的 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%"
        });
    };

Answer 1

当我第一次尝试使用 ZingCharts 时，这让我很吃惊。但答案其实很简单：

"values": [[x,y],[x,y],...],

或者：

"series": [{"values": [[timestamp,value],[timestamp,value],...]},
           {"values": [[timestamp,value],[timestamp,value],...]}]

Answer 2

卢克是正确的。您可以在值数组中使用 [x,y] 值对，或者您可以将其他系列分配给另一个 scale-x-n 对象，如 here.

所示

分别配置您的 scale-x、scale-x-2 和 scale-x-n 对象，并使用 "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] 值对方法，您可能会看到一些奇怪的结果。每个点之间是否应该有时间间隔，或者是否有多个值要为每个时间戳绘制，在一个系列中？

使用时间作为具有多条线的 x 轴的 zingcharts

zingcharts using time as x axis with multiple lines

javascript

charts

json

zingchart