39881


現在、chart.jsを使ってプログラムの作成をしていますが、期待通りの挙動になりません。  
動作としては、毎秒特定のcsvファイルを読み込んで数値をロードし、その数値をリアルタイムの棒グラフ上に出力するものを想定していますが、以下のコードを実行したところcellsに燗するundefinedエラーが出力されてしまい動きません。  
上記のようなグラフを実装するにはどうすればいいでしょうか、よろしくお願いします。

[code]

    function csv2Array() {
      var req = new XMLHttpRequest();
      var filePath = 'logs/logdata.csv';
      req.open('GET', filePath, true);
      req.send(null);
      req.onload = function () {
        var tmp = req.responseText.replace(/\r?\n/g, '');
        cells = tmp.split(',');
      } 
      return cells;
    }
    
    function drawBarChart() {
      // 4)chart.jsで描画
      var ctx = document.getElementById('myChart').getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          datasets: [
            {
              label: 'RX-OK',
              data: [
              ],
              backgroundColor: '#FFBBBB'
            },
            {
              label: 'TX-OK',
              data: [
              ],
              backgroundColor: '#BBBBFF'
            }
          ]
        },
        options: {
          scales: {
            xAxes: [
              {
                type: 'realtime'
              }
            ]
          },
          plugins: {
            streaming: {
              onRefresh: function (chart) {
    　　　　　　　csv2Array();
                Array.prototype.push.apply(chart.data.datasets[0].data, cells[1]
                );
                Array.prototype.push.apply(chart.data.datasets[1].data, cells[2]
                );
              }
    
    
            }
          }
        }
      });
    }
    
    function main() {
      drawBarChart();
    }
    
    main();
    
[/code]


CC BY-SA 3.0
2017-11-27T08:39:14.163
39879
2018-04-13T04:04:38.327
2018-04-13T04:04:38.327
19110
26347
question
javascript chart.js
chart.jsを用いたリアルタイムでデータを表示するグラフの作成について


JavaScript における変数のスコープと初期化の方法に注意してください。変数 `cells`
がどこで定義されていてどこで代入されているのかが不明瞭なコードになってしまっています。

具体的には、表を更新する `onRefresh` の部分で CSV を読み込むために `csv2Array()`
を呼び出していますが、この結果の戻り値はどこにも代入されていません。また、この関数のローカルスコープでは変数 `cells`
が定義されていない場合があります。同様に、`csv2Array` 関数の中における変数 `cells` の扱いにも注意してみてください。

更に、`XMLHttpRequest` を使う際には、`send` する前にイベントリスナを設定する必要があることにも注意してください。


CC BY-SA 3.0
2017-11-27T08:59:06.107
39881
2017-11-27T08:59:06.107
19110
39879
answer