0

我是 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 中绘制这些数据？

如果有任何帮助，我将不胜感激。谢谢

4

3 回答 3

0

我假设您希望 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数组，你应该得到你想要的。

于 2013-01-13T16:42:39.040 回答
0

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

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

<?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 -->

好好享受 ：）

于 2013-02-06T09:42:33.740 回答
0

我有一个像你的问题的例子，你必须创建一个像给定的第 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

于 2013-01-13T17:31:33.277 回答