我想制作从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>







我得到黑屏。

最佳答案

我用您的代码创建新项目,发现问题:

您应该将“数据”更改为“ json”,即结果变量!
 $ .getJSON(“”,function(data){...}

$ .getJSON(“”,function(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');


并且,图像:javascript - Highcharts,Mysql和Codeigniter-LMLPHP

关于javascript - Highcharts,Mysql和Codeigniter,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38555076/

10-12 12:50
查看更多