2017-01-02 7 views
4

x軸の日付をズームすると、グラフが停止します。ZingChartズーム日付の問題

これは私がロングで作業する場合にのみ発生します。 日付はうまくいきます。 私は熱意チャートで新たなんだと私は私が間違って

zingchart.exec('myChart', 'zoomtovalues', { 
     'xmin':1425312000000, 
     'xmax':1425657600000, 
}); 

をやっているし、私の値は、チャートがなっていた

"values": [ 
    [1425225600000,1], 
    [1425312000000,1], 
    [1425398400000,1], 
    [1425484800000,1], 
    [1425571200000,1], 
    [1425657600000,1], 
    [1425744000000,1], 
    [1425826800000,1], 
    [1425913200000,1], 
    [1425999600000,1] 
    ], 

UPDATE

理由が何であるかわからないんだけどスクロールなしで動作します

scaleX:{ 
label:{}, 
minValue:1425196800000, 
step:"day", 
    transform: { 
    type: 'date', 
    all:"%m/%d/%y" 
    } 
}, 

答えて

4

あなたのチャートやチャートの設定に関連する情報はあまりありませんでした。あなたが言っていることに基づいて、私はあなたが求めているところで野生の推測をしています。私が間違っているならば、フォローアップを感じる。

あなたが欠けているものは、scrollX属性です。これにより、スクロールバーが有効になります。もう1つの方法は、previewウィンドウを有効にすることです。これらのオプションの両方は、ズームとの結合で機能します。

一般にscrollX,previewおよびzoomingに関する情報です。 https://www.zingchart.com/docs/tutorials/interactive-features/chart-zoom-pan-scroll/

https://www.zingchart.com/docs/api/json-configuration/graphset/scroll-x-scroll-y/

https://www.zingchart.com/docs/api/json-configuration/graphset/preview/

var myConfig = { 
 
    \t type: 'line', 
 
    title: { 
 
     text: 'After 2 seconds call API method \`zoomtovalues\`' 
 
    }, 
 
    \t scaleX:{ 
 
    \t transform: { 
 
    \t  type: 'date', 
 
    \t } 
 
    \t }, 
 
    \t scrollX:{}, 
 
\t series: [ 
 
\t \t { 
 
\t \t \t values: [ 
 
     [1425225600000,1], 
 
     [1425312000000,1], 
 
     [1425398400000,1], 
 
     [1425484800000,1], 
 
     [1425571200000,1], 
 
     [1425657600000,1], 
 
     [1425744000000,1], 
 
     [1425826800000,1], 
 
     [1425913200000,1], 
 
     [1425999600000,1] 
 
     ], 
 
\t \t } 
 
\t ] 
 
}; 
 

 
setTimeout(function() { 
 
zingchart.exec('myChart', 'zoomtovalues', { 
 
    'xmin':1425312000000, 
 
    'xmax':1425657600000, 
 
}); 
 
}, 2000); 
 

 
zingchart.render({ 
 
\t id: 'myChart', 
 
\t data: myConfig, 
 
\t height: '100%', 
 
\t width: '100%' 
 
});
html, body { 
 
\t height:100%; 
 
\t width:100%; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
#myChart { 
 
\t height:100%; 
 
\t width:100%; 
 
\t min-height:150px; 
 
} 
 
.zc-ref { 
 
\t display:none; 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t <!--Assets will be injected here on compile. Use the assets button above--> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div> 
 
\t </body> 
 
</html>