Question

如何制作多行？此代码仅适用于一行。

在图表上仅显示dspower值

如何显示dspower和uspower值？

<script>
        var chart; // global
        function requestData() {
            $.ajax({
                url: 'data.php', 
                success: function(point) {
                    var series = chart.series[0],
                        shift = series.data.length > 20; // shift if the series is longer than 20


                    chart.series[0].addPoint(eval(point), true, shift);


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

        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'line',
                    events: {
                        load: requestData
                    }
                },
                title: {
                    text: 'Live random data'
                },


                  legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
    },

                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150,
                    maxZoom: 20 * 1000
                },
                yAxis: {
                    minPadding: 0.2,
                    maxPadding: 0.2,
                    title: {
                        text: 'Signalli',
                        margin: 80
                    }
                },
                         series: [{}]


            });     
        });

        </script>

data.php上的php代码

<?php
   $dspower = "65";  //dspower value is always different
   $uspower = "109";  ////dspower value is always different
   $ds1= json_decode($dspower);
   $x = time() * 1000;
   $a = array($x,$ds1);
   $ret = $a;
   echo json_encode($ret);
 ?>

在data.php上，输出如下：[1472210448000,53.9]

Answer 1

1）您只在图表代码中指定一个系列。

2）您只更新了更新循环中的一个系列。

要考虑图表配置中的两个系列，请更改此项：

series: [{}]

致：

series: [{ 
  name: 'DSPOWER Series'
},{
  name: 'USPOWER Series'
}]

这会设置两个命名系列，然后您可以为每个系列添加数据。

在 data.php 文件中，返回两个值

$return_data = array(
  'dspower' => $dspower_value,
  'uspower' => $uspower_value
);
echo json_encode($return_data);

然后在你的ajax成功函数中，访问两个返回的值，并相应地更新每个系列：

success: function(data) {
  var series1 = chart.series[0],
      series2 = chart.series[1],
      shift = series1.data.length > 20,
      parsedData = $.parseJSON(data);

  series1.addPoint(parsedData.dspower, false, shift);
  series2.addPoint(parsedData.uspower, false, shift);
  chart.redraw();

}

代码是近似值，可能需要调整。

highcharts多线直播图

1 个答案: