Question

我正在使用highcharts js api处理堆积条形图。我以json格式得到x轴和y轴数据。然后我处理该json数据，用系列名称分隔x轴和y轴。这是从php获得的数据。

$invest_data = [{"date":'Jun 1999', "company":'Koninklijke Philips Electronics N.V.', "netvalue":-649693}, {"date":'Nov 1999', "company":'Koninklijke Philips Electronics N.V.', "netvalue":-684506}, {"date":'Feb 2004', "company":'Koninklijke Philips Electronics N.V.', "netvalue":654546}, {"date":'Apr 2007', "company":'Koninklijke Philips Electronics N.V.', "netvalue":570714}, {"date":'Apr 2008', "company":'Koninklijke Philips Electronics N.V.', "netvalue":408931}, {"date":'Apr 2009', "company":'Koninklijke Philips Electronics N.V.', "netvalue":280295}, {"date":'Apr 2010', "company":'Koninklijke Philips Electronics N.V.', "netvalue":596167}, {"date":'Mar 2011', "company":'Dell Inc', "netvalue":40952}, {"date":'May 2011', "company":'Royal Dutch Shell', "netvalue":109165}, {"date":'Jul 2011', "company":'Vodafone Group', "netvalue":163900}, {"date":'Jul 2012', "company":'Dell Inc', "netvalue":179457}, {"date":'Mar 2013', "company":'Dell Inc', "netvalue":-1324}, {"date":'Apr 2013', "company":'Vodafone Group', "netvalue":17290}, {"date":'Jul 2013', "company":'Dell Inc', "netvalue":-14959}, {"date":'Oct 2013', "company":'Dell Inc', "netvalue":-305471}, {"date":'Feb 2014', "company":'Vodafone Group', "netvalue":3865}, {"date":'Mar 2014', "company":'Royal Dutch Shell', "netvalue":1385}, {"date":'May 2014', "company":'Vodafone Group', "netvalue":83640}, {"date":'Jun 2014', "company":'Royal Dutch Shell', "netvalue":1433}, {"date":'Aug 2014', "company":'Vodafone Group', "netvalue":7521}, {"date":'Dec 2014', "company":'Royal Dutch Shell', "netvalue":1293}, {"date":'Feb 2015', "company":'Vodafone Group', "netvalue":3757}, {"date":'Mar 2015', "company":'Royal Dutch Shell', "netvalue":1369}]

其实我想绘制堆叠柱形图，每月应显示每家公司的净交易。索引日期的第一个值是x轴，公司应该是系列名称，netvalue将是y轴。

这是我的脚本，用于分隔x轴，y轴数据点和系列名称（公司名称）

var data = <?php echo $invest_data; ?>;
var seriesData = [];
var xCategories = [];
var i, cat;
for(i = 0; i < data.length; i++){
    cat = data[i].date;
    if(xCategories.indexOf(cat) === -1){
       xCategories[xCategories.length] = cat;
    }
}
console.log(xCategories);
for(i = 0; i < data.length; i++){
    if(seriesData){          
        var currSeries = seriesData.filter(function(seriesObject){ return seriesObject.name === data[i].company;});
        if(currSeries.length === 0){
            seriesData[seriesData.length] = currSeries = {name: data[i].company, data: []};
        } else {
            currSeries = currSeries[0];
        }
        var index = currSeries.data.length;
        currSeries.data[index] = data[i].netvalue;
    } else {
        seriesData[0] = {name: data[i].company, data: [data[i].netvalue]};
    }
}

下面是图表脚本

var chart;   
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'invest-timeline',
        type: 'column'
    },
    title: {
        text: ''
    },
    xAxis: {
        labels: {
            rotation: - 90,
            align: 'right'
        },
        categories: xCategories
    },
    yAxis: {
        allowDecimals: false,
        //min: 0,
        title: {
            text: 'Net Transaction'
        }
    },
    legend: {
        borderWidth: 0
    },
    tooltip: {
        formatter: function() {
            return '<b>'+ this.x +'</b><br/>'+
                this.series.name +': '+ this.y +'<br/>'+
                'Total: '+ this.point.stackTotal;
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    series: seriesData
});

问题在于seriesData，它包含对象数据，但我需要json格式。 x轴数据点未正确显示。它只显示7个x轴数据点，因为我有7个记录对抗第一个公司..x轴应该显示所有数量为23的点。任何帮助将不胜感激。非常感谢。

Highcharts堆积柱形图动态json数据格式

0 个答案: