Php 具有不同ajax调用的多个Highcharts

我想知道在一个页面中使用多个highcharts创建仪表板的正确方法，我使用AJAX从PHP方法将数据加载到图表中

有了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);
}

看法

看法

var图//全球的
函数requestData（）{
$.ajax({
url:‘图表/随机_one’，
成功：功能（点）{
var系列=图表系列[0]，
shift=series.data.length>20；//如果序列长度超过20，则进行shift
//补充一点
chart.series[0].添加点（eval（point），true，shift）；
//一秒钟后再打
setTimeout（requestData，1000）；
},
缓存：false
});
}
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
defaultSeriesType:“样条线”，
活动：{
加载：请求数据
}
},
标题：{
文本：“实时随机数据一”
},
xAxis：{
键入：“日期时间”，
像素间隔：150，
最大缩放：20*1000
},
亚克斯：{
最小填充：0.2，
最大填充：0.2，
标题：{
文本：“值”，
差额：80
}
},
系列：[{
名称：“随机数据#1”，
数据：[]
}]
});
});
var-chart2//全球的
函数requestDataTwo（）{
$.ajax({
url:'图表/随机二'，
成功：功能（点）{
var系列=图表2.系列[0]，
shift=series.data.length>20；//如果序列长度超过20，则进行shift
//补充一点
图表2.系列[0]。添加点（eval（point），true，shift）；
//一秒钟后再打
setTimeout（requestData，1000）；
},
缓存：false
});
}
$（文档）.ready（函数（）{
图表2=新的高点图表。图表({
图表：{
renderTo:'容器二'，
defaultSeriesType:“样条线”，
活动：{
加载：requestDataTwo
}
},
标题：{
文本：“实时随机数据二”
},
xAxis：{
键入：“日期时间”，
像素间隔：150，
最大缩放：20*1000
},
亚克斯：{
最小填充：0.2，
最大填充：0.2，
标题：{
文本：“值”，
差额：80
}
},
系列：[{
名称：“随机数据#2”，
数据：[]
}]
});
});

您是否检查过这里关于堆栈溢出的类似帖子

它还可以帮助查看Highcharts演示页面的源代码，该页面上有许多图表，并查看如何调用它们。

---

对不起，我帮不了你。今晚晚些时候可能会有更多时间：）

如果您想在一个页面上使用多个图表，请首先为所有图表创建不同的变量，如

var chart1、chart2

现在打开
$（文档）。准备好了
为不同的图表定义所有图表变量，并给出适当的属性，特别是
renderTo
属性。您可以通过为图表使用单独的
load
事件来为不同的图表定义不同的ajax调用。
问题在于Highcharts演示告诉您在“container”div中呈现图表，而CakePHP默认布局也使用“container”div。这两者之间存在冲突

谢谢大家。
您的设置超时（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
  });
}

函数requestDataTwo（）{
$.ajax({
url:'test.php？random_two'，
成功：功能（点）{
var系列=图表2.系列[0]，
shift=series.data.length>20；//如果序列长度超过20，则进行shift
//补充一点
图表2.系列[0]。添加点（eval（point），true，shift）；
//一秒钟后再打
setTimeout（requestData，1000）；**到目前为止你尝试了什么？你的方法面临什么障碍？我用我迄今为止尝试的方法更新了帖子。我想补充一点，我得到了这个错误：未捕获的Highcharts错误#13:www.Highcharts.com/errors/13然后你可以检查这个为什么不搜索错误？或者访问url。可能上面提到的问题会有所帮助。它已经成功了更多的是关于highchart本身，而不是围绕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>

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
switch (key($_GET)) {

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

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