

はじめまして。  
javascriptの初心者なのですが、グラフを比較的容易に描画できるライブラリとしてchart.jsを見つけ、簡単なサンプルを作ってみました。  
実践的に使用する場合、DB上に格納されている値を、グラフの値にセットすることが必須要件になると思うのですが、phpで取得した配列の値をchart.jsに渡す方法が良く判りません。  
検索すると、ajaxというキーワードが出てくるのですが、ページを開いた時に表示されるだけの処理であれば、

[code]

    <?php
    $js_ary = json_encode($db_ary);
    ?>
    <script type = "text/javascript">
    <!--
        var ary = JSON.parse('<?php echo $js_ary; ?>');
        (以下省略)
    
[/code]

というように、JSON形式でデータを渡して、処理をするだけでよいのでしょうか？

素人丸出しの質問で申し訳ないですが、よろしくお願い致します。


CC BY-SA 3.0
2018-04-09T08:33:22.837
43090
2021-12-16T18:03:00.310
2018-04-13T04:05:18.920
19110
28085
question
javascript php json chart.js
phpで取得したDBの値をchart.jsのデータに使用したい


> JSON形式でデータを渡して、処理をするだけでよいのでしょうか？

JSONでなくても configの`'data: [0,0,0,0,0],'`などの行を`echo`などで出力すれば表示できます。  
また、以下にJSONデータ（固定データ）から表示する様に表示サンプルを直してみました。

[code]

    var randomScalingFactor = function() {
       return Math.round(Math.random() * 100);
      };
    
      var config = {
       type: 'pie',
       data: {
        datasets: [{
         data: [0,0,0,0,0],
         backgroundColor: [
          window.chartColors.red,
          window.chartColors.orange,
          window.chartColors.yellow,
          window.chartColors.green,
          window.chartColors.blue,
         ],
         label: 'Dataset 1'
        }],
        labels: [
         'Red',
         'Orange',
         'Yellow',
         'Green',
         'Blue'
        ]
       },
       options: {
        responsive: true
       }
      };
    
      window.onload = function() {
       var ctx = document.getElementById('chart-area').getContext('2d');
       window.myPie = new Chart(ctx, config);
                var jsondata = JSON.parse('{"A":12,"B":20,"C":25,"D":21,"E":22}');
                config.data.datasets[0].data[0] = jsondata["A"];
                config.data.datasets[0].data[1] = jsondata["B"];
                config.data.datasets[0].data[2] = jsondata["C"];
                config.data.datasets[0].data[3] = jsondata["D"];
                config.data.datasets[0].data[4] = jsondata["E"];
                window.myPie.update();
            };
    
      document.getElementById('randomizeData').addEventListener('click', function() {
       config.data.datasets.forEach(function(dataset) {
        dataset.data = dataset.data.map(function() {
         return randomScalingFactor();
        });
       });
    
       window.myPie.update();
      });
    
      var colorNames = Object.keys(window.chartColors);
      document.getElementById('addDataset').addEventListener('click', function() {
       var newDataset = {
        backgroundColor: [],
        data: [],
        label: 'New dataset ' + config.data.datasets.length,
       };
    
       for (var index = 0; index < config.data.labels.length; ++index) {
        newDataset.data.push(randomScalingFactor());
    
        var colorName = colorNames[index % colorNames.length];
        var newColor = window.chartColors[colorName];
        newDataset.backgroundColor.push(newColor);
       }
    
       config.data.datasets.push(newDataset);
       window.myPie.update();
      });
    
      document.getElementById('removeDataset').addEventListener('click', function() {
       config.data.datasets.splice(0, 1);
       window.myPie.update();
      });
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <script src="http://www.chartjs.org/samples/latest/utils.js"></script>
    <body>
     <div id="canvas-holder" style="width:100%">
      <canvas id="chart-area"></canvas>
     </div>
     <button id="randomizeData">Randomize Data</button>
     <button id="addDataset">Add Dataset</button>
     <button id="removeDataset">Remove Dataset</button>
    </body>
[/code]

サンプルをスニペット以外で動作させると（私の表示環境ではスニペットでエラーを吐かないので、もしエラーを吐いていたらごめんなさい。）

> Uncaught TypeError: Cannot read property 'red' of undefined

が表示されるのは、ボタン

[code]

    <button id="randomizeData">Randomize Data</button>
    <button id="addDataset">Add Dataset</button>
    <button id="removeDataset">Remove Dataset</button>
    
[/code]

が初期化（表示される前）前に

[code]

    document.getElementById('xxxxxx') 
    
[/code]

を実行してしまっているためです。  
`window.onload = function(){ }`で getElementByIdを
囲みオブジェクトが初期化された後にが動くようにするとエラーは出なくなります。


CC BY-SA 3.0
2018-04-09T13:08:20.470
43101
2018-04-13T09:21:07.553
2018-04-13T09:21:07.553
22793
22793
43090
answer