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

回答

相关问题