簡體   English   中英

我跟蹤了某人的代碼示例,並嘗試將其應用於我的HighChart程序,但我根本無法正常工作

[英]I had follow someone code samples and try apply to my HighChart program but I can't get it work at all

我跟蹤了某人的代碼示例,但是對javascript和highcharts還是陌生的。 實際上,該程序可以運行,但一次只能顯示一個月,我想顯示所有月份的數據。 對不起我的英語不好。 你能給我一些建議嗎,謝謝。

$(document).ready(function () {
    var options = {
        chart : {
            renderTo : 'container',
            defaultSeriesType : 'column',
            rightMargin : 80
        },
        title : {
            text : 'the scholls'
        },
        subtitle : {
            text : 'data for 2012 years'
        },
        xAxis : {
            title : 'months',
            categories : []
        },
        yAxis : [{
                min : 0,
                title : {
                    text : 'students'
                }
            }, {
                linkedTo : 0,
                opposite : true
            }
        ],
        tooltip : {
            formatter : function () {
                return '<b>' + this.series.name + '</b><br/>' + this.x + 'Months: ' + this.y + ' students:';
            }
        },
        legend : {
            layout : 'vertical',
            align : 'right',
            verticalAlign : 'top',
            x : -10,
            y : 100,
            borderWidth : 0
        },
        series : [{
                name : "students total",
                data : []
            }
        ]
    };

    //get the json files
    $.getJSON('http://localhost:3000/students/givemechart.json', function (data) {

        yData = options.series[0].data; //Array to store data for y column
        xData = options.xAxis.categories; //Array to store data for x column
        xDataObj = data[3]; //only can show one months
        yDataObj = data[3]; //only can show one totals

        // [[5, 2], [6, 3], [8, 2]]
        for (var key in xDataObj) {
            xData.push((xDataObj[key].month));
            console.dir(xData); //chrome console only
        }

        for (var key in yDataObj) {
            yData.push((yDataObj[key].total));
            console.dir(yData); //chrome console only
        }

        var chart = new Highcharts.Chart(options);

    });
});

這是我的json文件之一。

[
    {
        "student" : {
            "month" : 1,
            "total" : 24
        }
    }, {
        "student" : {
            "month" : 2,
            "total" : 27
        }
    }, {
        "student" : {
            "month" : 10,
            "total" : 96
        }
    }, {
        "student" : {
            "month" : 11,
            "total" : 1088
        }
    }, {
        "student" : {
            "month" : 12,
            "total" : 125
        }
    }

]

像這樣設置Xaxis的最小值和最大值: xAxis : { title : 'months', categories : [], min: 1, max: 12 }

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM