一次动态地向Highcharts添加100点

时间:2016-02-20 14:16:35

标签: highcharts highcharts-ng dotnethighcharts lazy-high-charts gwt-highcharts

我试图动态地向Highcharts添加100点,并在1000点之后移动图表。但我不能让它以一种好的方式运作。 这是我的代码。我做错了什么?

var chart;
var minData = 1000;

function myFunction() {
    setInterval(function() {
        for (var i = 0; i < 100; i++) {
            var y = Math.random();
            var shift = (chart.series[0].data.length >= minData ? true : false);
            chart.series[0].addPoint(y, false, shift);
        }

        chart.redraw();
    }, 1000);
}


$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: "container",
            type: "spline",
            zoomType: 'x'
        },
        title: {
            text: 'Inverter ~ AC Currents'
        },
        subtitle: {
            text: 'Click and drag in the plot area to zoom in'
        },
        plotOptions: {
            spline: {
                turboThreshold: 5000,
                lineWidth: 2,
                states: {
                    hover: {
                        enabled: true,
                        lineWidth: 3
                    }
                },
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            radius: 5,
                            lineWidth: 1
                        }
                    }
                }
            }
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 100,

            labels: {
                rotation: -45,


                align: 'right',
                style: "font: 'normal 10px Verdana, sans-serif'"
            },
            title: {
                text: 'Date/Time'
            }
        },
        yAxis: {
            title: {
                text: 'Current ~ Amps'
            }
        },
        tooltip: {
            formatter: function() {
                var celcius = parseInt(this.point.t - 273);
                var farenheit = parseInt((9 / 5) * (this.point.t - 273) + 32);
                return ' ' +
                    '<span style="color:blue;font-weight:bold;">' + this.series.name + '</span><br />' +
                    '<span style="color:blue;font-weight:bold;">' + Highcharts.dateFormat('%m/%d/%Y %H:%M:%S', this.point.x) + '</span><br />' +
                    '<span style="color:red;font-weight:normal;">' + 'Amps: </span><span style="font-weight:800;">' + this.point.y + '</span><br />';
            }
        },
        exporting: {
            enabled: true
        },
        series: [{
            name: 'Random data',
            data: []
        }]
    });
});

http://jsfiddle.net/o9sgrxzd/

0 个答案:

没有答案