Question

我使用下面的代码生成预计财务余额的折线图。数据是从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>

Answer 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上测试的输出。

动态设置Google Line Chart的起始值并重新绘制图表

1 个答案: