Javascript 要从下拉选择更新的图表
我有一个javascript文件app.js和一个php文件data.php app.js使用data.php的JSON输出中的数据创建一个图形 见下面的app.js: 上面的代码运行良好,我能够使用my data.php中查询的数据查看图形 data.php的部分内容如下:Javascript 要从下拉选择更新的图表,javascript,php,html,mysql,chart.js,Javascript,Php,Html,Mysql,Chart.js,我有一个javascript文件app.js和一个php文件data.php app.js使用data.php的JSON输出中的数据创建一个图形 见下面的app.js: 上面的代码运行良好,我能够使用my data.php中查询的数据查看图形 data.php的部分内容如下: $sql = "SELECT SystemID, ApparentPower FROM RaritanMachineDataa"; $result = sqlsrv_query($conn, $sql); $data =
$sql = "SELECT SystemID, ApparentPower FROM RaritanMachineDataa";
$result = sqlsrv_query($conn, $sql);
$data = array();
while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
$row = preg_replace("/[^0-9]/", "", $row);
$data[] = $row;
}
sqlsrv_free_stmt($result);
sqlsrv_close($conn);
echo json_encode($data);
?>
现在我想在我的图形下面有一个下拉菜单,我想能够从任何选项中进行选择,并将这些选项发送到我的data.php SELECT query并更新图形。我该怎么做呢 您可以使用addData和removeData,请参阅。addData每次调用只添加一个数据集,但removeData从图表中删除所有数据集。还有一种方法可以推送标签和数据集,请参见代码笔示例:
首先,您需要将图表保存在变量中,以便轻松添加和删除数据。当您将图表保存在var中时,比如说myChart,您可以调用removeData,比如:myChart.removeData。要添加数据,必须发送标签和数据,如:myChart.addData'news',[2,32,3]
接下来的想法是,在ajax调用成功时更新图表。重要的是将图表实例放在有ajax调用的同一个文件中,您应该将onclick调用移到js文件中,或者从app.js调用函数
现在取决于您的数据结构,您将需要遍历每一个,并获得值和标签。您必须从数据中获得与创建图表时相同的结果
代码示例:
你将在app.js中拥有什么
然后您的bargraph.html也将被更改:
<script type="text/javascript">
$('#submitButton').click(function(e){
var data1=$("#data1").val();
var data2=$("#data2").val();
updateChartAjaxCall(data1, data2);
});
</script>
好的,根据我现在的代码。在我的app.js文件中,我可以使用ajax从bargraph.html获取值'data1'和'data2'。如果是这样的话,你能告诉我,我想你已经将app.js包含到bargraph.html中了吗?如果是,那么您可以访问该文件中的所有html元素。您可以使用相同的方法从元素中获取值,或者可以在app.js中添加新函数,您将在onclick事件中从bargraph.html为submit按钮调用该函数,结束将所选值作为参数发送到app.js中的函数。我也可以使用示例代码编辑答案。是的,如果您可以使用示例代码编辑答案,将对我有所帮助。谢谢我们在聊天室聊天抱歉,现在无法聊天。在这里写下评论问题,或者用你想知道的一般问题更新你的问题,我将向你们所有人解释。
$(document).ready(function(){
$.ajax({
url: "http://localhost/chartjs/data.php",
method: "GET",
success: function(data) {
console.log(data);
var op1 = [];
var op2 = [];
let data_keys = Object.keys(data[0])
console.log(data_keys)
first = data_keys[0] //1st element
second = data_keys[1] //2nd element
for(var i in data) {
op1.push(data[i][first])
op2.push(data[i][second])
}
var chartdata = {
labels: op1,
datasets : [
{
label: 'SystemID and Apparent Power (VA)',
backgroundColor: 'rgba(250, 50, 50, 0.4)',
borderColor: 'rgba(500, 50, 50, 0.5)',
hoverBackgroundColor: 'rgba(500, 30, 30, 0.2)',
hoverBorderColor: 'rgba(500, 30, 30, 0.3)',
data: op2
}
]
};
var ctx = document.getElementById('mycanvas').getContext('2d');
var barGraph = new Chart(ctx, {
type: 'line',
data: chartdata,
options: {
scales: {
xAxes: [{
ticks: {
fontSize: 10
}
}],
yAxes: [{
ticks: {
fontSize: 10
}
}]
}
}
});
},
error: function(data) {
console.log(data);
}
});
function updateChartAjaxCall(data1, data2)
{
//ajax call here
$.ajax({
type: 'POST',
url: 'data.php',
dataType: 'html',
data: {data1:data1,data2:data2},
success:function(data){
// here also manipulate data what you get to update chart propertly
myChart.removeData();
myChart.addData('newLabel', [23, 33, 4]);
},
error:function (xhr, ajaxOptions, thrownError){
console.log(thrownError);
},
complete: function(){
}
});
e.preventDefault();
}
});
<script type="text/javascript">
$('#submitButton').click(function(e){
var data1=$("#data1").val();
var data2=$("#data2").val();
updateChartAjaxCall(data1, data2);
});
</script>