用于在折线图中显示信息的搜索框

Question

我正在尝试在我的网页中添加一个搜索框，以允许用户选择要显示在折线图中的数据。

我知道如何将变量从搜索框传递到PHP，但问题是，在PHP中对其进行更新后，如何用Java呈现图表以使用搜索框的值来更新信息？

$(document).ready(function() {
  $.ajax({
    url: "http://localhost/chartjs/followersdata.php",
    type: "GET",
    success: function(data) {
      console.log(data);

      var userid = [];
      var facebook_follower = [];
      var twitter_follower = [];
      var googleplus_follower = [];

      for (var i in data) {
        userid.push("UserID " + data[i].userid);
        facebook_follower.push(data[i].facebook);
        twitter_follower.push(data[i].twitter);
        googleplus_follower.push(data[i].googleplus);
      }

      var chartdata = {
        labels: userid,
        datasets: [{
            label: "facebook",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(59, 89, 152, 0.75)",
            borderColor: "rgba(59, 89, 152, 1)",
            pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
            pointHoverBorderColor: "rgba(59, 89, 152, 1)",
            data: facebook_follower
          },
          {
            label: "twitter",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(29, 202, 255, 0.75)",
            borderColor: "rgba(29, 202, 255, 1)",
            pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
            pointHoverBorderColor: "rgba(29, 202, 255, 1)",
            data: twitter_follower
          },
          {
            label: "googleplus",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(211, 72, 54, 0.75)",
            borderColor: "rgba(211, 72, 54, 1)",
            pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
            pointHoverBorderColor: "rgba(211, 72, 54, 1)",
            data: googleplus_follower
          }
        ]
      };

      var ctx = $("#mycanvas");

      var LineGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata
      });
    },
    error: function(data) {}
  });
});

感谢您的答复。

Answer 1

此链接可以为您提供帮助https://www.chartjs.org/docs/latest/developers/api.html

Answer 2

我设法做到了，但是我只返回json而不是呈现的图表。