Highcharts显示在标签上的实时值(Highcharts show real time val

2019-10-31 21:09发布

我遵循以下指导创建生动的图表: http://www.highcharts.com/documentation/how-to-use#live-charts

它赶上值和更新图表每“3”秒。 它工作正常!

现在,是有可能显示在标签上的实时值? 就像是:

这应该是改变每轮询.....或者至少,显示在其他图表代替最后产生的价值?

这是我的HTML / JS代码来生成图表:

    <script type="text/javascript">
    var chart; // global

    function requestData() {
        $.ajax({
            url: 'live-server-data.php', 
            success: function(point) {
                var series = chart.series[0],
                    shift = series.data.length > 30; // shift if the series is longer than 20
                var series = chart.series[1],
                    shift = series.data.length > 30; // shift if the series is longer than 20
                var series = chart.series[2],
                    shift = series.data.length > 30; // shift if the series is longer than 20

                // add the point
                chart.series[0].addPoint([point[0], point[1]], true, shift);
                chart.series[1].addPoint([point[0], point[2]], true, shift);
                chart.series[2].addPoint([point[0], point[3]], true, shift);

                setTimeout(requestData, 3000);  
            },
            cache: false
        });
    }


    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'spline',
                events: {
                    load: requestData
                }
            },
            title: {
                text: 'Live data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 40 * 1000
            },
            yAxis: {
                minPadding: 0.5,
                maxPadding: 0.5,
                showLastLabel: true,
                title: {
                    text: '',
                    margin: 1
                }
            },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    Highcharts.dateFormat('%H:%M:%S', this.x) +'<br/>'+
                    'MDA: '+ this.y;
            }
        },
            series: [{
                name: 'Point1',
                data: []
            }, {
                name: 'Point2',
                data: []
            }, {
                name: 'Point3',
                color: '#FF00FF',
                data: []
            }]
        });     
    });     
    </script>   

Answer 1:

这里是一个话题如何从highcharts论坛动态更改图例文本的链接。 [http://highslide.com/forum/viewtopic.php?f=9&t=18805&p=76061&hilit=change+series+name#p76061][1]

[1]: http://highslide.com/forum/viewtopic.php?f=9&t=18805&p=76061&hilit=change%20series%20name#p76061
希望能帮助到你!



文章来源: Highcharts show real time value on Labels
标签: highcharts