2017-01-02 3 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 속성입니다. 이렇게하면 스크롤바가 활성화됩니다. 또 다른 옵션은 preview 창을 활성화하는 것입니다. 이 두 가지 옵션은 확대/축소와 함께 작동합니다.

일반적으로 scrollX, previewzooming과 관련된 정보입니다. 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>