Question

我想知道在一个页面中制作带有多个高级图表的仪表板的正确方法，我正在使用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);
}

查看

<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>

Answer 1

问题是Highcharts演示告诉你在“容器”div中渲染图表而CakePHP默认布局也使用“容器”div。这两者之间存在冲突。

谢谢你们。

Answer 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“controller”

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

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

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

Answer 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

抱歉，我无能为力。今晚可能会有更多时间：）

Answer 4

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

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

具有不同ajax调用的多个Highcharts

4 个答案: