amCharts добавляет новую анимацию данных о местах

Question

Я использую amCharts (amStock) для отображения диаграммы акций в виде линейного графика. .

Я пытаюсь найти анимацию при добавлении новой точки на графике, так что это будет выглядеть, как это просто сделать то, что происходит сейчас, что она просто выскакивает в

Вот мой код:.

var chart; 
 
var chartData = []; 
 
var chartCursor; 
 
var day = 0; 
 
var firstDate = new Date(); 
 
firstDate.setDate(firstDate.getDate() - 500); 
 

 
// generate some random data, quite different range 
 
function generateChartData() { 
 
    for (day = 0; day < 50; day++) { 
 
     var newDate = new Date(firstDate); 
 
     newDate.setDate(newDate.getDate() + day); 
 

 
     var visits = Math.round(Math.random() * 40) - 20; 
 

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

 
// create chart 
 
AmCharts.ready(function() { 
 
    // generate some data first 
 
    generateChartData(); 
 

 
    // SERIAL CHART  
 
    chart = new AmCharts.AmSerialChart(); 
 
    chart.pathToImages = "http://www.amcharts.com/lib/images/"; 
 
    chart.marginTop = 0; 
 
    chart.marginRight = 10; 
 
    chart.autoMarginOffset = 5; 
 
    chart.zoomOutButton = { 
 
     backgroundColor: '#000000', 
 
     backgroundAlpha: 0.15 
 
    }; 
 
    chart.dataProvider = chartData; 
 
    chart.categoryField = "date"; 
 

 
    // AXES 
 
    // category 
 
    var categoryAxis = chart.categoryAxis; 
 
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true 
 
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD 
 
    categoryAxis.dashLength = 1; 
 
    categoryAxis.gridAlpha = 0.15; 
 
    categoryAxis.axisColor = "#DADADA"; 
 

 
    // value     
 
    var valueAxis = new AmCharts.ValueAxis(); 
 
    valueAxis.axisAlpha = 0.2; 
 
    valueAxis.dashLength = 1; 
 
    chart.addValueAxis(valueAxis); 
 

 
    // GRAPH 
 
    var graph = new AmCharts.AmGraph(); 
 
    graph.title = "red line"; 
 
    graph.valueField = "visits"; 
 
    graph.bullet = "round"; 
 
    graph.bulletBorderColor = "#FFFFFF"; 
 
    graph.bulletBorderThickness = 2; 
 
    graph.lineThickness = 2; 
 
    graph.lineColor = "#b5030d"; 
 
    graph.negativeLineColor = "#0352b5"; 
 
    graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection 
 
    chart.addGraph(graph); 
 

 
    // CURSOR 
 
    chartCursor = new AmCharts.ChartCursor(); 
 
    chartCursor.cursorPosition = "mouse"; 
 
    chart.addChartCursor(chartCursor); 
 

 
    // SCROLLBAR 
 
    var chartScrollbar = new AmCharts.ChartScrollbar(); 
 
    chartScrollbar.graph = graph; 
 
    chartScrollbar.scrollbarHeight = 40; 
 
    chartScrollbar.color = "#FFFFFF"; 
 
    chartScrollbar.autoGridCount = true; 
 
    chart.addChartScrollbar(chartScrollbar); 
 

 
    // WRITE 
 
    chart.write("chartdiv"); 
 
    
 
    // set up the chart to update every second 
 
    setInterval(function() { 
 
     // normally you would load new datapoints here, 
 
     // but we will just generate some random values 
 
     // and remove the value from the beginning so that 
 
     // we get nice sliding graph feeling 
 
     
 
     // remove datapoint from the beginning 
 
     chart.dataProvider.shift(); 
 
     
 
     // add new one at the end 
 
     day++; 
 
     var newDate = new Date(firstDate); 
 
     newDate.setDate(newDate.getDate() + day); 
 
     var visits = Math.round(Math.random() * 40) - 20; 
 
     chart.dataProvider.push({ 
 
      date: newDate, 
 
      visits: visits 
 
     }); 
 
     chart.validateData(); 
 
    }, 1000); 
 
});

<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script> 
 
<div id="chartdiv" style="width: 100%; height: 340px;"></div>

Answer 1

После получения поддержки от amCharts, это не возможно.

Боюсь, что мы в настоящее время не поддерживаем инкрементные обновления. Всякий раз, когда вы добавляете точку данных, диаграмме необходимо переоценить все данные и перерисовать. Он сохранит текущее масштабирование и положение во время работы, так что вы все еще можете ощутить это непрерывное обновление.