Question

我正在学习使用highcharts创建堆积条形图/柱形图。我从pojo类获得的json数据有三个属性 - 日期，状态和计数。在某一天，我可能没有特定状态或多个记录的记录。这就是JSON的外观：

[{"dateV":"2015-11-16","status":"A","count":10},{"dateV":"2015-11-16","status":"B","count":15},{"dateV":"2015-11-15","status":"A","count":5},{"dateV":"2015-11-14","status":"A","count":10},{"dateV":"2015-11-14","status":"B","count":10},{"dateV":"2015-11-14","status":"C","count":10}]

这个数据现在是一个arraylist。日期是这里的关键。图表上的X轴将具有日期。 Y轴应显示堆叠的所有状态值。我能够创建图表，但这是完全错误的，我想我知道为什么。我没有正确地分组数据。我创建了多个系列 - 1个用于类别，1个用于不同的状态值。考虑到这是我填充图表的方式，我应该如何创建类别和数据系列？

var categData = [];
var statusACountData = [];
var statusBCountData = [];
$.getJSON(url, function(response) {                 
    $.each(response, function(i, item) {
      var dateVal=response[i].dateV;
      var statusVal=response[i].status;
      var countVal=response[i].count;                   
      console.log(dateVal+"-"+statusVal+"-"+countVal);

         ******LOGIC TO CREATE SERIES*****

    });
    $('#chartDiv').highcharts({
                chart : {
                    type : 'column'
                },
                title : {
                    useHTML: true,
                    text : '<h3>StackedChart</h3>'
                },

                xAxis : {
                    categories : categData ,
                    crosshair : true
                },
                yAxis: {
                    allowDecimals: false,
                    min: 0,
                    title: {
                        text: 'Count'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold'
                        }
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true                               
                        }
                    }
                },
                series : [ {
                    name : 'A',
                    data : statusACountData 
                },{
                    name: 'B',
                    data : statusBCountData    //This may increase.Lets consider i have only two status values.
                } ]
            });
});

Answer 1

CODEPEN：http://codepen.io/anon/pen/MKreQE

你的问题是过滤和映射，这里有一些你可以改进的东西，以帮助你入门：

var filterMap = function (arr, status) {
  return arr.filter(function(a) { return a.status === status; }).map(function(a) { return [status, a.count]; })
};

$.getJSON(url, function(response) {
    $('#chartDiv').highcharts({
        chart : {
            type : 'column'
        },
        title : {
            useHTML: true,
            text : '<h3>StackedChart</h3>'
        },

        xAxis : {
            categories : categData ,
            crosshair : true
        },
        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Count'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold'
                }
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true                               
                }
            }
        },
        series : [ {
            name : 'A',
            data : filterMap(response, 'A')
        },{
            name: 'B',
            data : filterMap(response, 'B')
        } ]
    });
});

这应该是必需的结果。

Answer 2

尝试下面的示例，其中xAxis具有dateValue，yAxis具有countVal和statusVal。不要忘记链接到你的jsonfile（在我的例子中，我使用jsonfile.json）：

var dateVal=[];
var statusVal=[];
var countVal=[];

$.getJSON("jsonfile.json", function(response) {                 
    $.each(response, function(i, item) {
       dateVal[i]=response[i].dateV;
       statusVal[i]=response[i].status;
       countVal[i]=response[i].count;                   
      console.log(dateVal+"-"+statusVal+"-"+countVal);
    });

$('#chartDiv').highcharts({
            chart : {
                type : 'column'
            },
            title : {
                useHTML: true,
                text : '<h3>StackedChart</h3>'
            },

            xAxis : {
                categories : dateVal ,
                crosshair : true
            },
            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                    text: 'Count'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold'
                    }
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true                               
                    }
                }
            },
            series : [ {
                name : 'A',
                //data : statusACountData 
                data:statusVal,
            },{
                name: 'B',
                //data : statusBCountData    //This may increase.Lets consider i have only two status values.
                data: countVal,
            } ]
        });

}）;

Highcharts堆积条形图 - 解析JSON以形成系列

2 个答案: