2017-01-02 2 views
4

Wenn ich auf ein Datum in der x-Achse zoome, bleibt das Diagramm stecken.ZingChart Zoom Datum Ausgabe

Das passiert nur, wenn ich mit Longs arbeite. Mit Daten funktioniert es gut. Ich bin neu in Zing-Charts, und ich bin nicht sicher, was ich falsch

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

und meine Werte sind

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

UPDATE

Der Grund für die Grafik wurde immer tue stecken geblieben war der Schritt, es funktioniert ohne scrollX

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

Antwort

4

Sie haben nicht viele Informationen zu Ihrer Diagramm- oder Diagrammkonfiguration angegeben. Basierend auf dem, was du sagst, achte ich auf das, was du fragst. Wenn ich falsch liege, fühle das Gefühl, nachzufolgen.

Was Ihnen fehlt, ist das scrollX Attribut. Dies aktiviert die Bildlaufleiste. Eine andere Option ist das Aktivieren des Fensters preview. Beide Optionen arbeiten in der Kohäsion mit dem Zoomen.

Informationen zu scrollX, preview und zooming im Allgemeinen. 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>