2

Java スクリプトを使用して、Google チャートの折れ線グラフに供給される一連の特定のデータを変更する方法を確認するのにかなりの時間を費やしました。変更しようとしているデータは、MySQL テーブルから取得されます。 PHP を Json に変換して、チャートの Java スクリプトにフィードします。

データはさまざまな会社が販売する製品の価格比較であり、一部の会社は特定の製品を販売しておらず、その製品を販売していないことを示すために 0 が入力されています。次のような結果が得られないように、グラフ上の他のデータに接続する 0 と および 線を非表示にする必要があります。

サンプルチャート

グラフの下部にあるデータ行と、最後の日付列でゼロになる 2 つのデータ ポイントを非表示にしたいと思います。

スタックオーバーフローを調べたところ、有望に見える2つの質問が見つかりました:

質問1

質問2

2 番目の質問に続いて、Java スクリプトを使用して、値が 0 のデータが含まれるシリーズを変更できるようですが、これを行う方法の例はありません。私は与えられた例で作業しようとしましたが、私のニーズに合わせて変更することはできませんでした.

<script type="text/javascript">

        var jsonData =<?php echo $JSONdata ?>;    

        // Load the Visualization API and the piechart package.
        google.load('visualization', '1', {packages: ['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);

        // Callback that creates and populates a data table,
        // instantiates the Line chart, passes in the data and
        // draws it.
        function drawChart() {

            // Create our data table out of JSON data loaded from server.
            var data = new google.visualization.DataTable(jsonData);

            var colorArray = {}; 
            for(i=0;i<data.getNumberOfRows;i++) {
              if(data.getDataValue(i, 2,3,4,5)==0)//tell it to check data from competitor columns
                colorArray.push({color: 'white', lineWidth:0, pointSize:0});
            };

            var options = {title: 'The Prices for <?php echo $Code ?>',pointSize:5,lineWidth:2,
                vAxis: {title: 'Price (<?php echo substr("£", 1)?>)'},
                hAxis: {title: 'Date (year-month-day)'}, 
       series: {0:{color:'red'}, 1:{color: 'blue'}, 2:{color: 'green'}, 
                3:{color: 'purple'}, 4:{color: 'orange'}, 5:{color: 'teal'},
                6:{color: 'white', lineWidth:0, pointSize:0}} };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw (data,options); 
                      }

    </script>

だから本当に私は2つの答えのうちの1つを探しています:

colorArray私が求めている変更を実現するためのvarの変更。

また

値が 0 のデータをシリーズ 6 に変更する (したがって、ビューから非表示にする) ことを可能にする実用的なコードです。

この問題で私を助けてくれてありがとう。

サム・クック

4

1 に答える 1

2

やりたいことは、すべてのゼロをヌルに等しく設定しinterpolateNulls:true、チャートを描画するときにオプションでパラメーターを設定することです。

// Set all zeros in our dataTable to null.
var rows = data.getNumberOfRows();
var cols = data.getNumberOfColumns();
for (var i = 0; i < rows; ++i) {
  for (var j = 0; j < cols; ++j) {
    if (data.getValue(i, j) == 0) {
      data.setCell(i, j, null);
    }
  }
}
// etc..
var element = document.getElementById('visualization');
var chart = new google.visualization.LineChart(element);
chart.draw(data, { interpolateNulls: true });
于 2013-07-16T12:52:46.807 に答える