0

以下のコードを使用して、予測される財政収支の折れ線グラフを生成しています。データは、MySQL データベースの情報から生成されます。私ができるようにしたいのは、ページが読み込まれると、チャートが正しい開始残高で再描画されるように、ユーザーが動的に開始残高を設定できるページに入力フィールドを持つフォームを持つことですが、これを行う方法がわかりません：

$rows = array();
$table = array();
$table['cols'] = array(
    array('label' => 'Date', 'type' => 'string'),
    array('label' => 'Amount', 'type' => 'number')
);

[code to generate data goes here - i.e. calculating a balance for each date in the chart]

    $balance = $balance - $monthly - $weekly + $session_total;
    $temp = array();

    $temp[] = array('v' => (string) $date_display); 
    $temp[] = array('v' => (string) $balance); 
    $rows[] = array('c' => $temp);
}

$table['rows'] = $rows;
$jsonTable = json_encode($table);
//echo $jsonTable;
?>

    <script type="text/javascript">

    // 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);

    function drawChart() {

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(<?=$jsonTable?>);
                                                    var formatter = new google.visualization.NumberFormat({fractionDigits:2,prefix:'\u00A3'});
      formatter.format(data, 1);
      var options = {
          pointSize: 5,
          legend: 'none',
          hAxis: { showTextEvery:31 },
          series: {0:{color:'2E838F',lineWidth:2}},
          chartArea: {left:50,width:"95%",height:"80%"},
          backgroundColor: '#F7FBFC',
          height: 400
        };
      // Instantiate and draw our chart, passing in some options.
      //do not forget to check ur div ID
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>

      <div id="chart_div"></div>
4

1 に答える 1

1

新しいデータが利用可能になったときにグラフを更新するかなり簡単な方法があることを願っています。PHP を少し変更し、JavaScript を微調整する必要があります。

Google Charts を使用することの良い点は、drawChart()もう一度呼び出して再描画できることです。実行する前にデータを変更できる必要があるだけです。

私が PHP に行う変更は、元の値を保存することです。これにより、ユーザーの入力に応じて値を変更したい場合に、いつでも何かを参照できるようになります。

// display the date
$temp[] = array('v' => (string) $date_display);
// the data used by the chart
$temp[] = array('v' => (string) $balance);
// the original value
$temp[] = array('v' => (string) $balance);

また、関数に直接描画するのではなく、テーブル データをグローバルにします。このようにして、データを変更してチャートを簡単に更新できます。

var table = <?php echo $jsonTable; ?>;

function drawChart() {
    var data = new google.visualization.DataTable(table);
    ......
}

次のような基本的なフォームでこれをテストしました。

<form method="post" action="#" onsubmit="return false;">
    <input type="text" id="balance1" />
    <input type="text" id="balance2" />
    <button onclick="return refreshChart()">Go</button>
</form>

ボタンをクリックすると、デフォルトのアクションがキャンセルされ、 という関数が呼び出されrefreshChart()ます。この関数は値を取得し、チャートを再描画する前にオンザフライで元の値に追加します。

function refreshChart() {
    var balance1 = document.getElementById('balance1').value;
    var balance2 = document.getElementById('balance2').value;
    if(!balance1) {
        balance1 = 0;
    }
    if(!balance2) {
        balance2 = 0;
    }
    for(var i = 0, length = table.rows.length; i < length; i++) {
        table.rows[i].c['1'].v = parseFloat(table.rows[i].c['2'].v) + parseFloat(balance1) + parseFloat(balance2);
    }
    drawChart();
    return false;
}

入力された残高を取得して、に保存されている元の値に追加し、チャートで使用されてtable.rows[i].c['2'].vいる値を上書きします。table.rows[i].c['1'].vその後、元の関数を呼び出しdrawChart()ますが、新しいデータが使用されます。

私はいくつかのデフォルトデータをいじりました。これは、JSFiddleでテストした出力です。

于 2013-04-04T08:20:05.473 に答える