要从下拉选择中更新的图表

2022-01-22 00:00:00 php javascript mysql html chart.js

我有一个 javascript 文件 app.js 和一个 php 文件 data.php.

I have a javascript file app.js and a php file data.php.

app.js 使用 data.php 的 JSON 输出中的数据创建图表.

app.js creates a graph using data from the JSON output ofdata.php.

请参阅下面的 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);
    }
  });
});

上面的代码一切正常，我可以使用我的 data.php 中的查询数据查看图表.

The code above is all working fine, I am able to see a graph using the queried data from my data.php.

data.php部分内容如下:

$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 查询并更新图表.我该怎么做呢?

Now I want to have a drop down menu below my graph and I want to be able to choose from any of the options and send these options to my data.php SELECT query and update the graph. How do I go about doing this?

推荐答案

您可以使用 addData 和 removeData，见 https://www.chartjs.org/docs/latest/developers/updates.html.addData 每次调用只添加一个数据集，但 removeData 会从图表中删除所有数据集.还有推送标签和数据集的方法，请参见 codepen 示例:https://codepen.io/jordanwillis/pen/bqaGRR.

You can use addData and removeData, see https://www.chartjs.org/docs/latest/developers/updates.html. addData adds only one dataset per call, but removeData removes all datasets from chart. There is also way to push label and dataset see codepen sample: https://codepen.io/jordanwillis/pen/bqaGRR.

首先您需要将图表保存在变量中，这样您就可以轻松添加和删除数据.当您将图表保存在 var 中时，比如说 myChart，您可以调用 removeData()，例如:myChart.removeData().要添加数据，您必须发送标签和数据，例如:myChart.addData('news', [2, 32, 3]).

First what you need is to save your chart in variable, so you can easy add and remove data. when you have chart saved in var, let's say myChart, you can call removeData() like: myChart.removeData(). For adding data you have to send label and data like: myChart.addData('news', [2, 32, 3]).

接下来的想法是，当您的 ajax 调用成功时更新图表.重要的是要将图表实例放在您调用 ajax 的同一文件中，您应该将 onclick 调用移至 js 文件，或从 àpp.js 调用函数.

The idea is next, to update chart when your ajax call is success. The important thing is to have chart instance in same file where you have ajax call, you should move onclick call to js file, or call function from from àpp.js.

现在取决于您的数据结构，您将需要遍历每个并获取值和标签.您必须从数据中获得与创建图表时相同的结果.

Now depends on your data structure, you will need to go through each and get value and label. You have to get same result from data like you have when you're creating chart.

代码示例:

您将在 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(); 
    }
});

那么你的bargraph.html也会被改变:

<script type="text/javascript">

$('#submitButton').click(function(e){
    var data1=$("#data1").val();
    var data2=$("#data2").val();

    updateChartAjaxCall(data1, data2);
});
</script>

相关文章