使用時間作為x軸的多行圖

Question

因此，我正在嘗試繪制一個看起來很獨特的情況。 我想將時間用作我的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%"
        });
    };

Answer 1

盧克是正確的。 您可以使用[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]值對方法，則可能會看到一些時髦的結果。 是否應該在單個序列中每個點之間存在時間間隔，或者每個時間戳都需要繪制多個值？

Answer 2

這是我第一次嘗試使用ZingCharts時遇到的麻煩。 但是答案實際上很簡單：

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

要么：

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