Question

我是PHP，javascript和Jqplot的新手。我正在建立一个PHP的网站 array1输出

Array ( [0] => 0.0024 [1] => 0.0024 [2] => 0.0024 [3] => 0.0024 [4] => 0.00098765432098765 [5] => 0.00098765432098765 [6] => 0.00098765432098765 [7] => 0.001953125 [8] => 0.001953125 [9] => 1 [10] => 1 [11] => 1 [12] => 0.2 [13] => 0.2 [14] => 0.2 [15] => 0.2 [16] => 0.25 [17] => 2 )

数组2输出

Array ( [0] => 2013-01-13 14:13:05 [1] => 2013-01-13 14:14:56 [2] => 2013-01-13 14:15:05 [3] => 2013-01-13 14:15:13 [4] => 2013-01-13 14:16:48 [5] => 2013-01-13 14:17:20 [6] => 2013-01-13 14:17:56 [7] => 2013-01-13 14:25:06 [8] => 2013-01-13 14:27:28 [9] => 2013-01-13 14:29:41 [10] => 2013-01-13 14:30:36 [11] => 2013-01-13 14:30:53 [12] => 2013-01-13 14:35:37 [13] => 2013-01-13 14:39:52 [14] => 2013-01-13 14:48:30 [15] => 2013-01-13 14:49:40 [16] => 2013-01-13 14:51:23 [17] => 2013-01-13 14:55:05 )

如何在jqplot中绘制这些数据？

我会感激任何帮助。谢谢

Answer 1

我假设您希望array1为y轴，array2为x轴。只需在PHP循环中输出javascript行，就可以了。

<script type="text/javascript">
    var lines = [];

<? for ($i=0; $i<count($array1); $i++) { ?>
    lines[<?=$i?>] = ['<?=$array2[$i]?>', <?=$array1[$i]?>];
<? } ?>

    // The array 'lines' will be plotted into 'chart1' when the document loads
    $(document).ready(function(){
        var plot1 = $.jqplot ('chart1', [ lines ]);
    });

</script>

<!-- This is the div where the graph will be displayed -->
<div id="chart1" style="height:300px; width:500px;"></div>

绘制上面的lines数组，你应该得到你想要的东西。

Answer 2

我有一个像你的问题的例子，你必须像给定的第1行数组一样创建一个数组，你可以得到你的结果，

    <script class="code" type="text/javascript">

$(document).ready(function(){
  var line1=[['2008-06-30 8:00AM',4], ['2008-7-14 8:00AM',6.5], ['2008-7-28 8:00AM',5.7], ['2008-8-11 8:00AM',9], ['2008-8-25 8:00AM',8.2]];
  var plot2 = $.jqplot('chart2', [line1], {
      title:'Customized Date Axis', 
      axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer, 
          tickOptions:{formatString:'%b %#d, %#I %p'},
          min:'June 16, 2008 8:00AM', 
          tickInterval:'2 weeks'
        }
      },
      series:[{lineWidth:4, markerOptions:{style:'square'}}]
  });
});
</script>

如果您发现任何问题，您还可以查看以下链接http://www.jqplot.com/tests/date-axes.php

中的示例代码

Answer 3

以下是我尝试过的一个简单示例：

有一个名为attendence的mysql表，我将创建一些数据数组。

<?php
    $query = mysql_query("SELECT * FROM attendence");
    $results = array(array());

    while($line = mysql_fetch_array($query)){
        $results[] = $line;
    }

    $empNames = array();
    $attendence = array();
    foreach( $results as $g )
    {
        $empNames[] = $g[EmpId];
        $attendence[] = $g[attendence];
    }

?>

以下是HTML代码：

  <div id="content"> 
    <h2>Charts</h2>
        <div id="chart1b" style="height:300px; width:500px;"></div>
        <br>
        <div id="chart1" style="height:300px; width:500px;"></div>
        <br>
        <div id="chart2" style="height:300px; width:500px;"></div>
  </div>

这是我的javascript代码：

<script type="text/javascript">
$(document).ready(function(){
var line1 = <?php echo json_encode($results); ?>;
var plot1b = $.jqplot('chart1b', [line1], {
    title: 'Employee vs. Attendence',
        series:[{renderer:$.jqplot.BarRenderer}],
    axesDefaults: {
    tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
    tickOptions: {
        fontFamily: 'Georgia',
        fontSize: '10pt',
        angle: -30
        }
    },
    axes: {
     yaxis: {
         autoscale:true
         },
     xaxis: {
     renderer: $.jqplot.CategoryAxisRenderer
     }
    }
    });
});
  </script>         
  <!-- End code -->

  <!-- Chart Two code -->
  <script type="text/javascript">
$(document).ready(function(){
    var data = <?php echo json_encode($results); ?>;
    var plot1 = jQuery.jqplot ('chart1', [data], 
    { 
    seriesDefaults: {
    // Make this a pie chart.
    renderer: jQuery.jqplot.PieRenderer, 
    rendererOptions: {
    // Put data labels on the pie slices.
        // By default, labels show the percentage of the slice.
    showDataLabels: true
    }
        }, 
    legend: { show:true, location: 'e' }
          });
    });
</script>
    <!-- End code -->

    <!-- Chart three code -->
    <script type="text/javascript">
    $(document).ready(function(){
       var line1 = <?php echo str_replace('"','',json_encode($attendence)); ?>;
        var plot3 = $.jqplot('chart2', [line1], {
        title: 'Bar Chart with Point Labels', 
        seriesDefaults: {renderer: $.jqplot.BarRenderer},
         series:[
            {pointLabels:{
              show: true,
              labels:<?php echo json_encode($empNames); ?>
          }}],
          axes: {
             xaxis:{renderer:$.jqplot.CategoryAxisRenderer},
             yaxis:{padMax:1.3}}
          });
        });
   </script>
   <!-- End code -->

享受它：）

如何将PHP Array中的值绘制成Jqplot？

3 个答案: