Highcharts 多个图表，每个图表都有实时数据

Question

我有以下文件： rsrp.txt、sinr.txt、rssi.txt

他们每个人都包含这样的信息：

[1433289760000,-83.5]

我想在同一页面上使用多个图表。

我尝试使用 Highcharts 页面中的示例脚本：

        var chart; // global

    /**
     * Request data from the server, add it to the graph and set a timeout to request again
     */
    function requestData() {
        $.ajax({
            url: 'rssi.txt', 
            success: function(point) {
                var series = chart.series[0],
                    shift = series.data.length > 30; // shift if the series is longer than 20

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

                // call it again after one second
                setTimeout(requestData, 1700);  
            },
            cache: false
        });

    }

    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'spline',
                events: {
                    load: requestData
                }
            },
            title: {
                text: 'RSSI'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
            },
            yAxis: {
                minPadding: 2.5,
                maxPadding: 2.5,
                title: {
                    text: 'dBm',
                    margin: 80
                }
            },
            series: [{
                name: 'RSSI',
                data: []
            }]
        }); 

    });

在外部复制粘贴脚本并更改 URL 不起作用。（只有一个图表正在更新）

如果我创建第二个 requestData() 函数并复制 $(document).ready 部分也不起作用。

这在 Highcharts 中可行吗？如果有帮助，将输入文件合并为一个文件不是问题。

编辑：

我尝试使用此处的答案来解决它：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Signal</title>


  <!-- 1. Add these JavaScript inclusions in the head of your page -->
  <script type="text/javascript" src="jquery-1.10.1.js"></script>
  <script type="text/javascript" src="highcharts.js"></script>

  <!-- 2. Add the JavaScript to initialize the chart on document ready -->
  <script>
    var chart; // global
    var chartRsrp;

    /**
     * Request data from the server, add it to the graph and set a timeout to request again
     */
    function requestData() {
      $.ajax({
        url: 'rssi.txt',
        success: function(point) {
          var series = chart.series[0],
            shift = series.data.length > 30; // shift if the series is longer than 20

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

          // call it again after one second
          setTimeout(requestData, 1700);
        },
        cache: false
      });
    }

    function requestData2() {
      $.ajax({
        url: 'rsrp.txt',
        success: function(point) {
          var series = chartRsrp.series[0],
            shift = series.data.length > 30; // shift if the series is longer than 20

          // add the point
          chartRsrp.series[0].addPoint(eval(point), true, shift);

          // call it again after one second
          setTimeout(requestData, 1700);
        },
        cache: false
      });
    }


    $(document).ready(function() {
      chart = new Highcharts.Chart({
        chart: {
          renderTo: 'container',
          defaultSeriesType: 'spline',
          events: {
            load: requestData
          }
        },
        title: {
          text: 'RSSI'
        },
        xAxis: {
          type: 'datetime',
          tickPixelInterval: 150,
          maxZoom: 20 * 1000
        },
        yAxis: {
          minPadding: 2.5,
          maxPadding: 2.5,
          title: {
            text: 'dBm',
            margin: 80
          }
        },
        series: [{
          name: 'RSSI',
          data: []
        }]
      });

      chartRsrp = new Highcharts.Chart({
        chart: {
          renderTo: 'container2',
          defaultSeriesType: 'spline',
          events: {
            load: requestData2
          }
        },
        title: {
          text: 'RSRP'
        },
        xAxis: {
          type: 'datetime',
          tickPixelInterval: 150,
          maxZoom: 20 * 1000
        },
        yAxis: {
          minPadding: 2.5,
          maxPadding: 2.5,
          title: {
            text: 'dBm',
            margin: 80
          }
        },
        series: [{
          name: 'RSRP',
          data: []
        }]
      });

    });
  </script>

</head>

<body>

  <!-- 3. Add the container -->
  <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

  <div id="container2" style="width: 800px; height: 400px; margin: 0 auto"></div>

编辑 2：这样解决了：

                requestData2();
                requestData3();
                requestData4();
                setTimeout(requestData, 1300);

在第一个requestData()中

Answer 1

在 Highcharts-land 中，每个图表都需要是它自己的对象。同一页面上当然可以有多个图表，但您必须确保：

每个图表都是单独实例化的（在这种情况下，如果您只是 copying/pasting $(document).ready 部分，您可能会踩到 chart 变量。所以，相反对于单个 chart 变量，您可以单独设置它们（例如 chartRsrp = new Highcharts.Chart(...)），并确保在 requestData 调用中以不同方式引用它们。
每个图表都呈现给不同的 DOM 元素。因此，您可能会呈现 "container-rsrp"、"container-sinr"、"container-rssi" 等

希望这对您有所帮助！

Answer 2

首先，每个图表都必须单独实例化，因此在您的 HTML 中，您必须有一个 div，每个图表将在其中呈现图表的 ID，例如：

<div id='chartrsrp' class="large-12 columns"></div>
<div id='chartsinr' class="large-12 columns"></div>
<div id='chartrssi' class="large-12 columns"></div>

接下来，要从 Js 渲染图表，您必须获取 div 对象并像这样实例化每个图表：

var chartrsrp = $("#chartrsrp");
chartrsrp.highcharts({
     title: {
     ...
     },
     chart: {
     ...
});

希望这对您有所帮助！

Highcharts 多个图表，每个图表都有实时数据

Highcharts multiple charts, each with live data

javascript

jquery

highcharts

live