highcharts 多线实时图答案

【问题标题】：highcharts multiple line live graphhighcharts 多线实时图
【发布时间】：2016-08-26 14:11:56
【问题描述】：

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

图表上只显示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]

【问题讨论】：

在您的 php 中您没有使用 $uspower，它在输出中不可见，因此您的图表将无法使用它。也许您可以使用带有 $dspower 和 $uspower 的数组？
我知道我没有用过 $uspower ，我尝试了各种方法都没有成功
如果你想要两行，你需要两个系列。您的代码将一个值推送到一个系列（ chart.series[0].addPoint(eval(point), true, shift); ）您需要 1）添加第二个系列，以及 2）向它们添加一个点while 循环。

标签： php charts highcharts

【解决方案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();

}

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

【讨论】：