Highcharts，Mysql和Codeingniter

Question

我想制作highcharts从mysql获取数据并使用codeigniter。这里是我的表格：

CREATE TABLE tbl_chart (
PID varchar (10), P_ProjectPreparation int, P_ConceptualDesign int, P_Realization int, P_FinalPreparation int, P_GoLive); 

列PID是xAxis，另一列是系列。 这里是我的控制器：

<?php defined('BASEPATH') OR exit('No direct script access allowed'); 
class admin_c extends CI_Controller { 
public function __construct() 
    { 
     parent::__construct(); 

     $this->load->database(); 
     $this->load->helper('url'); 
     $this->load->model('chartmanage_m'); 
    } 

public function index() 
{ 
$this->load->view('admin_v'); 
} 

public function data() 
{ 

$data = $this->chartmanage_m->get_data(); 

$category = array(); 
$category['name'] = 'PID'; 

$series1 = array(); 
$series1['name'] = 'Project Preparation'; 

$series2 = array(); 
$series2['name'] = 'Conceptual Design'; 

$series3 = array(); 
$series3['name'] = 'Realization'; 

$series4 = array(); 
$series4['name'] = 'Final Preparation'; 

$series5 = array(); 
$series5['name'] = 'Go Live'; 

foreach ($data as $row) 
{ 
$category['data'][] = $row->PID; 
$series1['data'][] = $row->P_ProjectPreparation; 
$series2['data'][] = $row->P_ConceptualDesign; 
$series3['data'][] = $row->P_Realization; 
$series4['data'][] = $row->P_FinalPreparation; 
$series5['data'][] = $row->P_GoLive; 
} 

$result = array(); 
array_push($result,$category); 
array_push($result,$series1); 
array_push($result,$series2); 
array_push($result,$series3); 
array_push($result,$series4); 
array_push($result,$series5); 

print json_encode($result, JSON_NUMERIC_CHECK); 
}} 

这里是我的模型：

<?php defined('BASEPATH') OR exit('No direct script access allowed'); 
class chartmanage_m extends CI_Model { function __construct() { 

parent::__construct(); } 
function get_data() 
{ 
$this->db->select('*'); 
$this->db->from('tbl_chart' 

); 
$query = $this->db->get(); 
return $query->result(); 
} 

这是我的观点：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var options = { 
      chart: { 
       renderTo: 'container', 
       type: 'line', 
       marginRight: 130, 
       marginBottom: 25 
      }, 
      title: { 
       text: 'Project Requests', 
       x: -20 //center 
      }, 
      subtitle: { 
       text: '', 
       x: -20 
      }, 
      xAxis: { 
       categories: [] 
      }, 
      yAxis: { 
       title: { 
        text: 'Requests' 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      tooltip: { 
       formatter: function() { 
         return '<b>'+ this.series.name +'</b>'+ 
         this.x +': '+ this.y; 
       } 
      }, 


      series: [] 
     } 

     $.getJSON("<?php echo site_url('admin_c/data');?>", function(data) { 
     options.xAxis.categories = json[0]['data']; 
      options.series[0] = json[1]; 
      options.series[1] = json[2]; 
      options.series[2] = json[3]; 
      options.series[3] = json[4]; 
      options.series[4] = json[5]; 
      chart = new Highcharts.Chart(options); 
     }); 
    }); 
</script> 

，我也得到空白屏幕。任何想法可能是错的？三江源

Answer 1

我创造新的项目，你的代码，我发现了问题：

你应该改变“数据”为“json”，那个结果变量！ $ .getJSON（ “” 功能（数据）{...} 到 $ .getJSON（ “”，函数（JSON）{..}

<script type="text/javascript"> 
    $(document).ready(function() { 

     var options = { 
      chart: { 
       renderTo: 'container', 
       type: 'line', 
       marginRight: 130, 
       marginBottom: 25 
      }, 
      title: { 
       text: 'Project Requests', 
       x: -20 //center 
      }, 
      subtitle: { 
       text: '', 
       x: -20 
      }, 
      xAxis: { 
       categories: [] 
      }, 
      yAxis: { 
       title: { 
        text: 'Requests' 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      tooltip: { 
       formatter: function() { 
         return '<b>'+ this.series.name +'</b>'+ 
         this.x +': '+ this.y; 
       } 
      }, 


      series: [] 
     } 


     $.getJSON("<?php echo site_url('admin_c/data');?>", function(json) {    
      options.xAxis.categories = json[0]['data']; 
      options.series[0] = json[1]; 
      options.series[1] = json[2]; 
      options.series[2] = json[3]; 
      options.series[3] = json[4]; 
      options.series[4] = json[5]; 
      chart = new Highcharts.Chart(options); 
     }); 
    }); 
</script> 

，并与测试数据：

INSERT INTO `tbl_chart` (`PID`, `P_ProjectPreparation`, `P_ConceptualDesign`, `P_Realization`, `P_FinalPreparation`, `P_GoLive`) VALUES ('12', '11', '22', '33', '44', '55'), ('13', '111', '222', '333', '444', '555'), ('14', '1111', '2222', '3333', '4444', '5555'), ('15', '11111', '22222', '33333', '44444', '55555'); 

和图像：

Answer 2

你应该通过你的json_encoded阵列的视图作为数组从您的控制器功能视图中显示....

所以你定义从您的控制器功能与视图一起显示的视图。 ..

$this->render('Index',array('json_array_var_in_view' => $my_json_array)); 

以及这就是我们如何做，在警予......沿着CI类似的路线肯定的东西...

上述行表示控制器的观点是index.php文件，它应该保持变量$json_array_var_in_view ...

所以我所强调的是功能data应调用与传递给它的阵列的观点...