Highcharts show real time value on Labels

懵懂的女人 提交于 2019-12-12 02:15:39

问题


I follow the following guide to create a live chart: http://www.highcharts.com/documentation/how-to-use#live-charts

It catch the values and update the chart every '3' seconds. It works fine!

Now, is it possible to show the real time value on labels? Something like:

This should be change every polling..... Or at least, show the last generated value in other chart place?

This is my HTML/JS code to generate the chart:

    <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>   

回答1:


Here is the link of a topic on how to change legend text dynamically from highcharts forum. [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
Hope it helps!



来源:https://stackoverflow.com/questions/11390131/highcharts-show-real-time-value-on-labels

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!