Question

我尝试使用Google Line Chart显示图表，但我不确定如何在一个图表中包含2行，最好只使用1个php文件。 1个正面和1个负面。我需要2个数组和2个查询吗？

这是我的数据库中的表格，其中包含我的折线图的值。表中没有主键。

+--------------------------------+
| direction  |  xaxis  |  yaxis  |
+--------------------------------+
|  negative  |   5     |  -2.32  |
|  negative  |   10    |  -5.69  |
|  negative  |   15    |  -9.1   |
|  negative  |   20    |  -10.8  |
|  negative  |   25    |  -7.0   |
|  positive  |   5     |   1.22  |
|  positive  |   10    |   3.9   |
|  positive  |   15    |   7.77  |
|  positive  |   20    |   11.5  |
|  positive  |   25    |   9.31  |
+--------------------------------+

这是我到目前为止的代码：

$query= "select * from table";
$result=mysqli_query($connect, $query);

$graph=array();
while($row = mysqli_fetch_array($result)){
        $graph[]=$row;
}

    $graph=json_encode($graph);

    <html>
      <head>
        <!--Load the Ajax API-->
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <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(graph) {

          // Create our data table out of JSON data loaded from server.
          var data = new google.visualization.DataTable();
          data.addColumn('number','xaxis');
          data.addColumn('number','Positive');
          data.addColumn('number','Negative');

          var dataArray=[];
          $.each(graph, function(obj,obj){
             dataArray.push([parseFloat(obj.xaxis),parseFloat(obj.yaxis)]);
          }
          data.addRows(dataArray);

          var options = {
              width: 800,
              height: 600,
          curveType:'function'
            };
          // Instantiate and draw our chart, passing in some options.
          // Do not forget to check your div ID
          var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
          chart.draw(data, options);
        }
        </script>
      </head>

      <body>


    <div id="chart_div"></div>

      </body>
    </html>

这是获取我需要的图表的代码，但值是硬编码的

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCurveTypes);

function drawCurveTypes() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Positive');
      data.addColumn('number', 'Negative');

      data.addRows([
        [5, 1.22, -2.32],    
        [10, 3.9, -5.69],   
        [15, 7.77, -9.1],  
        [20, 11.5, -10.8],   
        [25, 9.31, -7.0]
      ]);

      var options = {
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Popularity'
        },
        series: {
          1: {curveType: 'function'}
        }
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

我的问题是如何填充addRows，这样我就可以获得与第二个代码类似的正确数组格式。

任何帮助将不胜感激。如果有更好，更简单的方法来编码，请告诉我。

使用谷歌折线图的多线

0 个答案: