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 调整。

使用谷歌图表的好处是你可以通过再次调用来重新绘制它们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 回答