highcharts动态使用插件groups_categories

时间:2015-05-18 09:37:50

标签: javascript json highcharts

我尝试动态使用HighCharts插件: grouped_categories

这个插件的好Json格式是:

xAxis: {
categories: [{
    name: "Fruit",
    categories: ["Apple", "Banana", "Orange"]
}, {
    name: "Vegetable",
    categories: ["Carrot", "Potato", "Tomato"]
}, {
    name: "Fish",
    categories: ["Cod", "Salmon", "Tuna"]
}]

}

我使用this technic动态制作我的xAx:

  • 在我的图表中,我写道:xAxis: {categories: []},然后我打电话给 Json的一部分options.xAxis.categories = json[0]['data'];

所以我尝试了很多技术,但从来没有好过......

你有解决这个问题的想法吗?

非常感谢。

地理-X

编辑1

这是我使用AJAX生成JSON后的代码

// -- Graphical options --
        var options = {
            chart: {
                renderTo: 'graphique',
                type : type_graph},
            xAxis: {categories: []},
            title: {text: ''},
            tooltip: {
                animation : true,
                borderRadius : 15
                    },
            plotOptions: {
                line: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    groupPadding: 0.1,
                    states: {
                        hover: {
                            brightness: -0.3}}
                        },
                column: {
                    allowPointSelect: true,
                    cursor: 'pointer'
                        }
            }
            ,series: []
        }

        $.post(
            "statistiques_data.php",
            parametres_connexion,
            function(json) {

                // X AXIS --------------------------------------

                    options.xAxis.categories = json[0]['data'];

                // DATA --------------------------------------

                    options.series[0] = json[1];

                // LEGEND --------------------------------------

                    options.legend = {enabled : false,backgroundColor : '#FCFFC5'};

                // LABELS --------------------------------------

                    switch (type_graph) {

                        ///////////////////////////////
                        case 'line' :
                        ///////////////////////////////

                            var dataSum = 0;
                            for (var i=0;i < json[1]['data'].length;i++) {
                                dataSum += json[1]['data'][i]
                            };
                            options.plotOptions.bar.dataLabels = {enabled:true,formatter:function() {var pcnt = (this.y / dataSum) * 100; return  Highcharts.numberFormat(pcnt,2) + ' %';}};

                            options.xAxis.labels = {step: 1,style: {fontSize: '9px',fontFamily: 'Arial Bold, Arial, Verdana'}};

                        break;

                        ///////////////////////////////
                        case 'column' :
                        ///////////////////////////////

                            var dataSum = 0;
                            for (var i=0;i < json[1]['data'].length;i++) {
                                dataSum += json[1]['data'][i]
                            };
                            options.plotOptions.column.dataLabels = {enabled:true,formatter:function() {var pcnt = (this.y / dataSum) * 100; return  Highcharts.numberFormat(pcnt,2) + ' %';}};

                            options.xAxis.labels = {
                            autoRotation: [-10,-20,-30,-40,-50,-60,-70,-80,-90],

                            step: 1,
                            style: {fontSize: '80%',fontFamily: 'Arial Bold, Arial, Verdana'}};

                        break;
                    }

                // GRAPHIC

                chart = new Highcharts.Chart(options);}, 
            "json");

编辑2

我使用PHP代码生成我的JSON:

[{name: "col1", categories: [{ name: "CITY1", categories: ["Not information", "Multiple", "type1"] }, { name: "CITY2", categories: ["Not information", "Type2"] }, { name: "CITY3", categories: ["Not information", "Type1","Type2"] }]} { name: "col2", categories: [1,6,1,3,1,2,1,9]}

但是现在如果我尝试生成我的图形,我就没有结果:

我的名字是col1

options.xAxis.categories = json[0];

我的名字是col2

options.series[0] = json[1];

我的json导航出错,但我看不出错误在哪里

1 个答案:

答案 0 :(得分:1)

很久以后看了你的问题。相信我,我正在看这个问题大约半个小时,你提供的json的名字和类别都是string。但是Highcharts使用stringnumber格式。将您的json categories更改为number,它会起作用。