Highcharts与Codeigniter的集成_Codeigniter_Highcharts

Highcharts与Codeigniter的集成

codeigniter highcharts

Highcharts与Codeigniter的集成,codeigniter,highcharts,Codeigniter,Highcharts,我试图在Codeigniter上创建Highcharts的折线图。 1.以下是我的JSON数据： [ { "name": "Category", "data": [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "A

我试图在Codeigniter上创建Highcharts的折线图。 1.以下是我的JSON数据：

[
    {
        "name": "Category",
        "data": [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec"
        ]
    },
    {
        "name": "WordPress",
        "data": [
            4,
            5,
            6,
            2,
            5,
            7,
            2,
            1,
            6,
            7,
            3,
            4
        ]
    },
    {
        "name": "Code Igniter",
        "data": [
            5,
            2,
            3,
            6,
            7,
            1,
            2,
            6,
            6,
            4,
            6,
            3
        ]
    },
    {
        "name": "Highcharts",
        "data": [
            7,
            8,
            9,
            6,
            7,
            10,
            9,
            7,
            6,
            9,
            8,
            4
        ]
    }
]

我从MySql获取数据，这里是控制器：chart.php

下面是我的View index.php，当我尝试加载它时，什么也没发生，我得到了一个空白屏幕

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Line Chart</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.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><br/>'+
                        this.x +': '+ this.y;
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },

            series: []
        }


        $.getJSON('data.php', function(json) {
            options.xAxis.categories = json[0]['data'];
            options.series.push(json[1]);
            options.series.push(json[2]);
            options.series.push(json[3]);
            var chart = new Highcharts.Chart(options);
        });
    });
    </script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
    <div id="container" name="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>

并使用model data.php，如下所示：类数据扩展CI_模型{ 函数_构造{ 父项：：_构造； } 函数获取数据{ $this->db->select'month，wordpress，codeigniter，highcharts'； $this->db->from'project_requests'； $query=$this->db->get；返回$query->result； } }

我没有指出问题的症结所在。有人能帮我吗？

你忘了提这个问题了？问题是什么issue@chhameed. 请。请参见主题3下的->当我尝试加载它时，什么也没有发生我得到一个空白屏幕-表示没有创建行Chart@MCITTrends检查所有控制台错误，并检查是否在函数`$.getJSON'data.php'，函数JSON{}`@Deep 3015中获取数据。检查过了。但问题仍然存在，问题的根源可能是在执行JS代码后导入Highcharts。移动负责导入Highcharts的行，以便它们正好位于导入jQuery的脚本之后。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Line Chart</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.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><br/>'+
                        this.x +': '+ this.y;
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },

            series: []
        }


        $.getJSON('data.php', function(json) {
            options.xAxis.categories = json[0]['data'];
            options.series.push(json[1]);
            options.series.push(json[2]);
            options.series.push(json[3]);
            var chart = new Highcharts.Chart(options);
        });
    });
    </script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
    <div id="container" name="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>