javascript - highcharts动态使用插件grouped_categories

Question

我尝试动态使用 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让我的 xAxis 动态化:

• 在我的图表中我写:xAxis: {categories: []} 在我调用 Json 的一部分 options.xAxis.categories = json[0]['data'];

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

您有解决这个问题的想法吗？

非常感谢。

Geo-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 导航出现错误，但我不知道错误在哪里

Answer 1

看了你的问题很长时间。相信我，我看了这个问题大约半个小时，您提供的 json 的名称和类别均为 string。但 Highcharts 使用字符串和数字格式。将您的 json categories 更改为 number ，它将起作用。