Forms 动态设置Google折线图的起始值并重新绘制图表

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

$rows=array（）；
$table=array（）；
$table['cols']=数组(
数组（'label'=>'Date'，'type'=>'string'），
数组（'label'=>'Amount'，'type'=>'number'）
);
[此处显示生成数据的代码-即计算图表中每个日期的余额]
$balance=$balance-$monthly-$weekly+$session\u总计；
$temp=array（）；
$temp[]=数组（'v'=>（字符串）$date\u display）；
$temp[]=数组（'v'=>（字符串）$balance）；
$rows[]=数组（'c'=>$temp）；
}
$table['rows']=$rows；
$jsonTable=json_encode（$table）；
//echo$jsonTable；
?>
//加载可视化API和piechart包。
load（'visualization'，'1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
函数绘图图（）{
//使用从服务器加载的JSON数据创建我们的数据表。
var data=new google.visualization.DataTable（）；
var formatter=new google.visualization.NumberFormat（{fractionDigits:2，前缀：'\u00A3'}）；
格式化程序。格式化（数据，1）；
变量选项={
点数：5，
图例：“无”，
哈克斯：{showTextEvery:31}，
系列：{0:{颜色：'2E838F'，线宽：2}}，
图表区：{左：50，宽：“95%”，高：“80%”，
背景颜色：“#F7FBFC”，
身高：400
};
//实例化并绘制图表，传入一些选项。
//别忘了检查你的部门ID
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}

希望有一种相当简单的方法在新数据可用时刷新图表。它需要对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);
    ......
}

它获取输入的余额并将其添加到存储在

表.rows[i].c['2'].v

中的原始值中，并覆盖图表使用的

表.rows[i].c['1'].v

中的值。然后调用原始的

drawChart（）

函数，但使用新数据

---

我使用了一些默认数据，这是我在上对其进行测试的输出。

只是想澄清，您希望用户能够在数据集的开头插入一个新值？重新划清界限。。。他们提供的价值不应该影响以后的任何事情？@cchana谢谢你的留言。用户输入起始余额，然后使用MySQL数据库中的值计算图形上的其余点。因此，当余额从一个项目转移到下一个项目时，用户输入的值当然会影响整个图表。但本质上，用户输入的值只需要为图形上的第一个条目设置变量$balance。我希望这更清楚！谢谢，太好了。我已将问题标记为已回答。与上述方法略有不同的是，我一直在尝试各种方法来获取两个输入的总和，并将其传递到Google图表（而不是一个），但没有成功。您是否能够修改您的答案，使其能够使用两种输入？谢谢Nick@Nick，当然，我已经更新了答案和JSFIDLE以接受两个输入。。。它只是将它们广告在一起，并用该值更新图表。

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

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;
}