如何在Jquery中绘制半圆形饼图

Question

I have two form arrays,

$expenditure = $_POST['expenditure'];
$revennue = $_POST['revenue'];

I have to use the values from these array and plot a Pie chart ,Like half of the pie chart will show the relation of expenditure and other half revenue

I tried using Jqplot something like this

$(document).ready(function(){
  var data = [
  <?php foreach($revenue as $key=> $val){ 
         $x = ($val/array_sum($revennue))*180;   
  ?>
    ['<?php echo "rev_".$key ?>', <?php echo $x ?>],
<?php }?>
 <?php foreach($expenditure as $key=> $val){ 
         $x = ($val/array_sum($expenditure))*180;   
  ?>
    ['<?php echo "exp_".$key ?>', <?php echo $x ?>],
<?php }?>
  ];
  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
          this.startAngle = 180
        }
      },
      legend: { show:false, location: 'e' }
    }
  );
});

But its showing me wrong pie chart ,

Can Any one let me know how I can fix this

Thanks in Advance

Answer 1

I made an attempt to draw Half Pie Chart. I don't know if there's an easier way to do this.

With the help of some calculations and hacks, I managed to plot one. A dummy-data , startAngle , shadowDepth , dataLabels , seriesColors , backgroundColor helped me achieve this. Here's the JSFiddle link for the same : jqPLot - Half Pie Chart

NOTE: When you hover over the chart, you can see the dummy-slice. I think you can fix that with a little research.

Let me know if you need any help.