Highcharts线和条形图的JSON格式

时间:2014-08-13 02:49:14

标签: json highcharts

我在为highcharts图设置JSON文件时遇到问题。该图应该有三组线和一组条。我可以使用脚本中嵌入的数据,但不能使用JSON文件。

到目前为止,这是我的JSON:

{"data":[
{"SM_cap":[144.0,'W1'],
          [176.0,'W2'],
          [135.6,'W3'],
          [148.5,'W4'],
          [216.4,'W5'],
          [194.1,'W6'],
          [95.6,'W7'],
          [54.4,'W8'],
          [49.9,'W9'],
          [71.5,'W10'],
          [106.4,'W11'],
          [129.2,'W12'],
          [144.0,'W13'],
          [176.0,'W14'],
          [135.6,'W15'],
          [148.5,'W16'],
          [216.4,'W17'], 
          [194.1,'W18'],
          [95.6,'W19'],
          [54.4,'W20'],
          [49.9,'W21'],
          [71.5,'W22'], 
          [106.4,'W23'],
          [129.2,'W24'],
          [144.0,'W25'],
          [176.0,'W26'],
          [135.6,'W27'],
          [148.5,'W28'],
          [49.9,'W29'],
          [71.5,'W30'],
          [106.4,'W31'],
          [129.2,'W32']
},
{"MD_cap":[144.0,'W1'],
          [176.0,'W2'],
          [135.6,'W3'],
          [148.5,'W4'],
          [216.4,'W5'],
          [194.1,'W6'],
          [95.6,'W7'],
          [54.4,'W8'],
          [49.9,'W9'],
          [71.5,'W10'],
          [106.4,'W11'],
          [129.2,'W12'],
          [144.0,'W13'],
          [176.0,'W14'],
          [135.6,'W15'],
          [148.5,'W16'],
          [216.4,'W17'], 
          [194.1,'W18'],
          [95.6,'W19'],
          [54.4,'W20'],
          [49.9,'W21'],
          [71.5,'W22'], 
          [106.4,'W23'],
          [129.2,'W24'],
          [144.0,'W25'],
          [176.0,'W26'],
          [135.6,'W27'],
          [148.5,'W28'],
          [49.9,'W29'],
          [71.5,'W30'],
          [106.4,'W31'],
          [129.2,'W32']
},
{"L_cap": [144.0,'W1'],
          [176.0,'W2'],
          [135.6,'W3'],
          [148.5,'W4'],
          [216.4,'W5'],
          [194.1,'W6'],
          [95.6,'W7'],
          [54.4,'W8'],
          [49.9,'W9'],
          [71.5,'W10'],
          [106.4,'W11'],
          [129.2,'W12'],
          [144.0,'W13'],
          [176.0,'W14'],
          [135.6,'W15'],
          [148.5,'W16'],
          [216.4,'W17'], 
          [194.1,'W18'],
          [95.6,'W19'],
          [54.4,'W20'],
          [49.9,'W21'],
          [71.5,'W22'], 
          [106.4,'W23'],
          [129.2,'W24'],
          [144.0,'W25'],
          [176.0,'W26'],
          [135.6,'W27'],
          [148.5,'W28'],
          [49.9,'W29'],
          [71.5,'W30'],
          [106.4,'W31'],
          [129.2,'W32']
},
{"M_share":[144.0,'W1'],
          [176.0,'W2'],
          [135.6,'W3'],
          [148.5,'W4'],
          [216.4,'W5'],
          [194.1,'W6'],
          [95.6,'W7'],
          [54.4,'W8'],
          [49.9,'W9'],
          [71.5,'W10'],
          [106.4,'W11'],
          [129.2,'W12'],
          [144.0,'W13'],
          [176.0,'W14'],
          [135.6,'W15'],
          [148.5,'W16'],
          [216.4,'W17'], 
          [194.1,'W18'],
          [95.6,'W19'],
          [54.4,'W20'],
          [49.9,'W21'],
          [71.5,'W22'], 
          [106.4,'W23'],
          [129.2,'W24'],
          [144.0,'W25'],
          [176.0,'W26'],
          [135.6,'W27'],
          [148.5,'W28'],
          [49.9,'W29'],
          [71.5,'W30'],
          [106.4,'W31'],
          [129.2,'W32']
},
{"weeks":['W1', 'W2', 'W3', 'W4', 'W5', 'W6',
            'W7', 'W8', 'W9', 'W10', 'W11', 'W12', 'W13',                       
            'W14', 'W15', 'W16', 'W17', 'W18', 'W19', 'W20',                    
            'W21', 'W22', 'W23', 'W24', 'W25', 'W26', 'W27',                              
            'W28', 'W29', 'W30', 'W31', 'W32']
}
]}

脚本:

$(function () {

$(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container', zoomType: 'x'
        },

        title: {
            text: 'Historical Average Daily Traded Value and Market Share in N225'
        },

        subtitle: {
            text: document.ontouchstart === undefined ?
            'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
        }, 

        xAxis: [{
            categories: weeks,
        }],

        yAxis: [{ // Primary yAxis
            labels: {
            },

            title: {
                text: 'Market Share in N225',
            }

        }, { // Secondary yAxis
            title: {
                text: 'Value (Billion JPY)',
            },
            labels: { },
            opposite: true
        }],

        tooltip: {
            formatter: function() {
                return ''+
                    this.x +': '+ this.y +
                    (this.series.name == 'Large Cap' ? ' BJPY' : 'Mid Cap' ? ' BJPY' : 'Small Cap' ? ' BJPY' : '%');
            }
        },

        plotOptions: {
            column: {
                stacking: "normal"                
            }                    
        },

        legend: {
            layout: 'horizontal',
            align: 'center',
            x: 120,
            verticalAlign: 'bottom',
            y: 0,
            floating: false,
            backgroundColor: '#FFFFFF'
        },

        series: [{
            index : 0,
            name: 'MarketShare',
            color: '#89A54E',
            type: 'column',
            data: M_share,
        }, 

        {
            index: 1,
            name: 'Large Cap',
            color: '#4572A7',
            type: 'spline',
            yAxis: 1,
            data: L_cap,
        }, 

        {
            index: 2,
            name: 'Mid Cap',
            color: '#3EDC60',
            type: 'spline',
            yAxis: 1,
            data: MD_cap,           
        },

        {
            index: 3,
            name: 'Small Cap',
            color: '#DC3E3E',
            type: 'spline',
            yAxis: 1,
            data: SM_cap,
        }]
    },

    $.getJSON('data.json', function(data) {
        options.series[0].data = data.M_share;
        options.series[1].data = data.L_cap;
        options.series[2].data = data.M_cap;
        options.series[3].data = data.S_cap;
        options.xAxis.categories = data.weeks;
        var chart = new Highcharts.Chart(options);
    });

});


});

2 个答案:

答案 0 :(得分:0)

你有错误的JSON文件,你应该使用Object而不是Array作为'data'指令的数据容器。因此,请将JSON文件中的[]替换为{}

答案 1 :(得分:0)

在highcharts中,您需要将一个点定义为pair [x,y],并且x可以是一个字符串(如果您在x轴上使用类别),但y需要是一个数字。在您的情况下,[144.0,' W1']之类的内容不正确。因此,请让json适应正确的表格或准备一个能够返回正确数据的解析器。