使用JSON將數據從數據庫加載到MVC php中的高圖表

Question

我正在使用MVC for Entity Framework &開發一個應用程序&我想從數據庫上傳數據以將其顯示到高圖的列向下鑽取圖表中？

我的代碼綁定是如下：

$result = mysql_query("select s.id, s.stage_name as stage, coalesce(sum(o.potential) * (s.stage_weight/100),0) as w_pot FROM s_stages as s 
left join opps as o 
WHERE o.buy_stage = s.id"); 
$model["chart"]=array(); 
while($row = mysql_fetch_array($result)){ 
    array_push($model["chart"], 
     array( 
      "id"=>$row["s.id"], 
      "name"=>$row["stage"], 
      "w_pot"=>$row["w_pot"] 
     )); 
} 

，並鑑於我與它的腳本代碼如下編寫代碼：

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<div id="container" class="span6" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
<script type="text/javascript"> 

$(function() { 
    var chart; 
    $(document).ready(function() { 

     var colors = Highcharts.getOptions().colors, 
      categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'], 
      name = 'Browser brands', 
      data = [{ 
        y: 55.11, 
        color: colors[0], 
        drilldown: { 
         name: 'MSIE versions', 
         categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'], 
         data: [10.85, 7.35, 33.06, 2.81], 
         color: colors[0] 
        } 
       }, { 
        y: 21.63, 
        color: colors[1], 
        drilldown: { 
         name: 'Firefox versions', 
         categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'], 
         data: [0.20, 0.83, 1.58, 13.12, 5.43], 
         color: colors[1] 
        } 
       }, { 
        y: 11.94, 
        color: colors[2], 
        drilldown: { 
         name: 'Chrome versions', 
         categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0', 
          'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'], 
         data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22], 
         color: colors[2] 
        } 
       }, { 
        y: 7.15, 
        color: colors[3], 
        drilldown: { 
         name: 'Safari versions', 
         categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon', 
          'Safari 3.1', 'Safari 4.1'], 
         data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14], 
         color: colors[3] 
        } 
       }, { 
        y: 2.14, 
        color: colors[4], 
        drilldown: { 
         name: 'Opera versions', 
         categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'], 
         data: [ 0.12, 0.37, 1.65], 
         color: colors[4] 
        } 
       }]; 

     function setChart(name, categories, data, color) { 
chart.xAxis[0].setCategories(categories, false); 
chart.series[0].remove(false); 
chart.addSeries({ 
name: name, 
data: data, 
color: color || 'white' 
}, false); 
chart.redraw(); 
     } 

     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'column' 
      }, 
      title: { 
       text: 'Browser market share, April, 2011' 
      }, 
      subtitle: { 
       text: 'Click the columns to view versions. Click again to view brands.' 
      }, 
      xAxis: { 
       categories: 
      }, 
      yAxis: { 
       title: { 
        text: '' 
       } 
      }, 
      plotOptions: { 
       column: { 
        cursor: 'pointer', 
        point: { 
         events: { 
          click: function() { 
           var drilldown = this.drilldown; 
           if (drilldown) { // drill down 
            setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color); 
           } else { // restore 
            setChart(name, categories, data); 
           } 
          } 
         } 
        }, 
        dataLabels: { 
         enabled: true, 
         color: colors[0], 
         style: { 
          fontWeight: 'bold' 
         }, 
         formatter: function() { 
          return this.y +'%'; 
         } 
        } 
       } 
      }, 
      tooltip: { 
       formatter: function() { 
        var point = this.point, 
         s = this.x +':<b>'+ this.y +'% market share</b><br/>'; 
        if (point.drilldown) { 
         s += 'Click to view '+ point.category +' versions'; 
        } else { 
         s += 'Click to return to browser brands'; 
        } 
        return s; 
       } 
      }, 
      series: [{ 
       name: name, 
       data: data, 
       color: 'white' 
      }], 
      exporting: { 
       enabled: false 
      } 
     }); 
    }); 

}); 
</script> 

Answer 1

嘗試這樣的：

<html> 
<head> 
<title>Graph</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

</head> 
<body> 
<?php 

$result = mysql_query("select s.id, s.stage_name as stage, coalesce(sum(o.potential) * (s.stage_weight/100),0) as w_pot FROM s_stages as s 
left join opps as o 
WHERE o.buy_stage = s.id"); 
$stagearray=array(); 
    $wt_arr=array(); 

while($row = mysql_fetch_array($result)){ 
    $sname="'".$row["stage"]."'"; 
    array_push($stagearray,$sname); 
    array_push($wt_arr,$row["w_pot"]); 
} 

$categories=implode(",",$stagearray); 
$ponts_str=implode(",",$wt_arr); 

?> 

<div id="container" class="span6" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
<script type="text/javascript"> 

$(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'column' 
      }, 
      title: { 
       text: 'Stages' 
      }, 
      subtitle: { 
       text: '' 
      }, 
      xAxis: { 
       categories: [<?php echo $categories;?>] 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Points' 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       backgroundColor: '#FFFFFF', 
       align: 'left', 
       verticalAlign: 'top', 
       x: 100, 
       y: 70, 
       floating: true, 
       shadow: true 
      }, 
      tooltip: { 
       formatter: function() { 
        return ''+ 
         this.x +': '+ this.y +' mm'; 
       } 
      }, 
      plotOptions: { 
       column: { 
        pointPadding: 0.2, 
        borderWidth: 0 
       } 
      }, 
       series: [{ 
       name: 'Stages', 
       data: [<?php echo $ponts_str;?>] 

      }] 
     }); 
    }); 

}); 
</script> 
</body> 
</html>