具有不同 ajax 调用的多个 Highcharts答案

【问题标题】：Mutiple Highcharts with different ajax calls具有不同 ajax 调用的多个 Highcharts
【发布时间】：2012-12-28 21:39:54
【问题描述】：

我想知道在单个页面中制作包含多个 highcharts 的仪表板的正确方法，我正在通过 PHP 方法使用 AJAX 将数据加载到图表中。

使用 1 个图表，我这样做：

控制器

public function random_values(){
    //CakePHP code
    $this->autoRender = FALSE;

    header("Content-type: text/json");
$x = time() * 1000;
$y = rand(1,100);
$ret = array($x, $y);
echo json_encode($ret);
}

查看

<script type="text/javascript">

    var chart; //global
    function requestData() {
        $.ajax({
            url: 'singlecharts/random_values',
            success: function(point) {
                var series = chart.series[0],
                    shift = series.data.length > 20; // 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, 1000);
            },
            cache: false
        });
    }

    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'spline',
                events: {
                    load: requestData
                }
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
            },
            yAxis: {
                minPadding: 0.2,
                maxPadding: 0.2,
                title: {
                    text: 'Value',
                    margin: 80
                }
            },
            series: [{
                name: 'Random data',
                data:  []
            }]
        });
    });
</script>

但是我怎么做很多图表，每个人都有自己的ajax请求。

任何帮助将不胜感激，谢谢。

编辑

这是我迄今为止尝试过的方法，但不起作用。

控制器：

public function random_one(){
    $this->autoRender = FALSE;

    //Set the JSON header
    header("Content-type: text/json");

    //The x value is the current JavaScript time, ...
    $x = time() * 1000;

    //The y value is a random number
    $y = rand(1,100);

    //Create a PHP array and echo it as JSON
    $ret = array($x, $y);
    echo json_encode($ret);
}

public function random_two(){
    $this->autoRender = FALSE;

    //Set the JSON header
    header("Content-type: text/json");

    //The x value is the current JavaScript time, ...
    $x = time() * 1000;

    //The y value is a random number
    $y = rand(1,100);

    //Create a PHP array and echo it as JSON
    $ret = array($x, $y);
    echo json_encode($ret);
}

查看

<script type="text/javascript">
    var chart; //global
    function requestData() {
        $.ajax({
            url: 'charts/random_one',
            success: function(point) {
                var series = chart.series[0],
                    shift = series.data.length > 20; // 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, 1000);
            },
            cache: false
        });
    }

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

    var chart2; //global
    function requestDataTwo() {
        $.ajax({
            url: 'charts/random_two',
            success: function(point) {
                var series = chart2.series[0],
                    shift = series.data.length > 20; // shift if the series is longer than 20

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

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

    $(document).ready(function() {

        chart2 = new Highcharts.Chart({
            chart: {
                renderTo: 'container-two',
                defaultSeriesType: 'spline',
                events: {
                    load: requestDataTwo
                }
            },
            title: {
                text: 'Live random data two'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
            },
            yAxis: {
                minPadding: 0.2,
                maxPadding: 0.2,
                title: {
                    text: 'Value',
                    margin: 80
                }
            },
            series: [{
                name: 'Random data #2',
                data:  []
            }]
        });
    });
</script>

【问题讨论】：

到目前为止您尝试过什么？您的方法面临哪些障碍？
我用我目前尝试过的内容更新了帖子。
我想补充一点，我收到了这个错误：未捕获的 Highcharts 错误 #13: www.highcharts.com/errors/13
那你可以看看这个stackoverflow.com/questions/13112652/…
你为什么不谷歌这个错误？或访问网址。

标签： php ajax cakephp highcharts

【解决方案1】：

问题在于，Highcharts 演示告诉您在“容器”div 中呈现图表，而 CakePHP 的默认布局也使用“容器”div。这两者之间发生了冲突。

谢谢你们。

【讨论】：

【解决方案2】：

你的 setTimeout(requestData, 1000);在 requestData 和 requestDataTwo 中是相同的。您需要它们彼此独立，否则，返回的总是不是 1，而是请求数量的两倍...

function requestDataTwo() {
  $.ajax({
    url: 'test.php?random_two',
    success: function(point) {
      var series = chart2.series[0],
      shift = series.data.length > 20; // shift if the series is longer than 20

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

      // call it again after one second
      setTimeout(requestData, 1000); **<-- Change this here to requestDataTwo**
    },
    cache: false
  });
}

同样...您需要将其添加到您的 php“控制器”

<?php
switch (key($_GET)) {

  case 'random_two':
    random_two();
    die();
break;

  case 'random_one':
    random_one();
    die();
    break;
}
?>

【讨论】：

它更多地与 highchart 本身有关，而不是围绕 Ajax 请求本身的技术细节。此外，您可以假设控制器已经正常工作。

【解决方案3】：

您是否在此处查看过有关堆栈溢出的类似帖子？

Cannot display multiple Highcharts on a single page
Manage multiple highchart charts in a single webpage
Using multiple Highcharts in a single page
Create six chart with the same rendering,different data (highchart )

这也有助于查看 Highcharts 演示页面的源代码，该页面在一个页面上有许多图表，并了解它们是如何被调用的。
Highcharts demo

对不起，我帮不上忙。今晚晚些时候可能会有更多时间:)

【讨论】：

可能提到的问题会有所帮助。

【解决方案4】：

如果您想在单个页面上使用多个图表，请首先为所有图表创建不同的变量，例如 var chart1, chart2;

现在在$(document).ready 上定义不同图表的所有图表变量，并提供适当的属性，尤其是renderTo 属性。您可以通过为图表使用单独的load 事件来为不同的图表定义不同的 ajax 调用。

【讨论】：