使用json和post url将数据放在Highchart中

时间:2015-11-13 08:36:30

标签: javascript jquery ajax highcharts

使用JSON数据创建折线图我使用json中的数据采用以下格式:

数据

 {"Categoires":["2015-10-31","2015-10-30","2015-11-09","2015-11-08","2015-11-07","2015-11-06","2015-11-10","2015-11-05","2015-11-04","2015-11-12","2015-11-03","2015-11-11"],"Series":[0,2,0,0,0,2,0,2,1,1,4,0]}

高屏代码:

$.post(trendUrl,params,function(data)
        {
            console.log("you are submitting"+data);


        }); 


 $('#trendChart').highcharts({
            title: {

            x: -20 //center
        },
        subtitle: {

            x: -20
        },
        xAxis: {
             gridLineWidth: 1,
            categories: []
        },
        yAxis: {

            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {

        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            color:'#FBA208',
          data: []
        }]
    }); 

这里我想在y中绘制X和Series中的类别。 提前致谢

1 个答案:

答案 0 :(得分:1)

尝试:

$(function () {

        data =  {"Categoires":["2015-10-31","2015-10-30","2015-11-09","2015-11-08","2015-11-07","2015-11-06","2015-11-10","2015-11-05","2015-11-04","2015-11-12","2015-11-03","2015-11-11"],"Series":[0,2,0,0,0,2,0,2,1,1,4,0]};
        $('#container').highcharts({
            title: {
                text: 'title',
                x: -20 //center
            },
            subtitle: {
                text: 'subtitle',
                x: -20
            },
            xAxis: {
                categories: data.Categoires
            },
            yAxis: {
                title: {
                    text: 'yaxis'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: 'dd'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'data',
                data: data.Series
            },]
        });
    });

jsfiddle:http://jsfiddle.net/e2bm7wu8/