AMCharts滾動每分鐘UI

更新，我想看看如何有一個滾動的AMCharts線圖正是這樣AMCharts滾動每分鐘UI

這裏是我談論的的jsfiddle。 https://jsfiddle.net/6nchebyu/1/

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
<div id="chartdiv"></div>       


var chartData = generateChartData(); 
var chart = AmCharts.makeChart("chartdiv", { 
    "type": "serial", 
    "theme": "light", 
    "marginRight": 80, 
    "autoMarginOffset": 20, 
    "marginTop": 7, 
    "dataProvider": chartData, 
    "valueAxes": [{ 
     "axisAlpha": 0.2, 
     "dashLength": 1, 
     "position": "left" 
    }], 
    "mouseWheelZoomEnabled": true, 
    "graphs": [{ 
     "id": "g1", 
     "balloonText": "[[value]]", 
     "bullet": "round", 
     "bulletBorderAlpha": 1, 
     "bulletColor": "#FFFFFF", 
     "hideBulletsCount": 50, 
     "title": "red line", 
     "valueField": "visits", 
     "useLineColorForBulletBorder": true, 
     "balloon":{ 
      "drop":true 
     } 
    }], 
    "chartScrollbar": { 
     "autoGridCount": true, 
     "graph": "g1", 
     "scrollbarHeight": 40 
    }, 
    "chartCursor": { 
     "limitToGraph":"g1" 
    }, 
    "categoryField": "date", 
    "categoryAxis": { 
     "parseDates": true, 
     "axisColor": "#DADADA", 
     "dashLength": 1, 
     "minorGridEnabled": true 
    }, 
    "export": { 
     "enabled": true 
    } 
}); 

chart.addListener("rendered", zoomChart); 
zoomChart(); 

// this method is called when chart is first inited as we listen for "rendered" event 
function zoomChart() { 
    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues 
    chart.zoomToIndexes(chartData.length - 40, chartData.length - 1); 
} 


// generate some random data, quite different range 
function generateChartData() { 
    var chartData = []; 
    var firstDate = new Date(); 
    firstDate.setDate(firstDate.getDate() - 5); 

    for (var i = 0; i < 1000; i++) { 
     // we create date objects here. In your data, you can have date strings 
     // and then set format of your dates using chart.dataDateFormat property, 
     // however when possible, use date objects, as this will speed up chart rendering. 
     var newDate = new Date(firstDate); 
     newDate.setDate(newDate.getDate() + i); 

     var visits = Math.round(Math.random() * (40 + i/5)) + 20 + i; 

     chartData.push({ 
      date: newDate, 
      visits: visits 
     }); 
    } 
    return chartData; 
}

但我想它更新的每一分鐘，而不是「復位」，如果你正在尋找舊的數據視圖端口（放大或縮小）。也許有一個按鈕將其重置回前面，然後繼續顯示當前數據進入？這可能具備所有這一切嗎？

來源

2016-08-04 Justin Smith

創建此主題後，我想到了一點。

chart.zoomOutOnDataUpdate = false; 
    var j = 101; 
    setInterval(function() { 
     var x = j++, 
      y = (Math.random() * 50) + 50; 

     chart.dataProvider.shift(); 
     chart. 

    dataProvider.push({ 
     date: x, 
     visits: y 
    }); 

    // chart.dataChanged(); 
    chart.validateData(); 
}, 1000);

chart.zoomOutOnDataUpdate = false;使其不會放大。

chart.dataProvider.shift（）將第一個數據點推出屏幕。在這一點上，我只需要添加一個自定義按鈕來設置zoomOutOnDataUpdate = true，當我點擊它。也可以在縮小或放大時將其更改爲假。

來源

2016-08-04 19:34:27

AMCharts滾動每分鐘UI

回答

相關問題