1

1 つのページに複数のハイチャートを含むダッシュボードを作成する適切な方法を知りたいのですが、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>
4

4 に答える 4

1

あなたの setTimeout(requestData, 1000); requestData と requestDataTwo の両方で同じです。両方が互いに独立している必要があります。そうしないと、一方が常に 1 ではなく、2 倍のリクエスト数で返されます...

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;
}
?>
于 2013-01-21T22:32:27.390 に答える
1

問題は、Highcharts デモが「コンテナ」div でチャートをレンダリングするように指示し、CakePHP のデフォルト レイアウトも「コンテナ」div を使用することでした。その二人の間には対立があった。

君たちありがとう。

于 2013-01-02T14:23:20.713 に答える
0

スタックオーバーフローに関する同様の投稿をここで確認しましたか？

1つのページに複数のHighchartsを表示できない
単一のWebページで複数のHighchartチャートを管理する1つのページ
で複数のHighchartsを使用する
同じレンダリング、異なるデータで6つのチャートを作成する（highchart）

また、1ページに多数のチャートがあるHighchartsデモページのソースを表示し、それらがどのように呼び出されるかを確認することも役立ちます。
Highchartsデモ

申し訳ありませんが、これ以上お役に立てません。今晩遅くにもっと時間がかかるかもしれません:)

于 2012-12-28T23:13:26.290 に答える
0

1 つのページで複数のグラフを使用する場合は、最初に次のようにすべてのグラフに対して異なる変数を作成します。var chart1, chart2;

次に$(document).ready、さまざまなチャートのすべてのチャート変数を定義し、適切なプロパティ、特にrenderToプロパティを指定します。loadチャートに個別のイベントを使用することで、チャートごとに異なる ajax 呼び出しを定義できます。

于 2012-12-29T09:30:15.707 に答える