如何从ajax中创建数据成为Highchart中的X轴?

问题描述 投票:1回答:2

我用这个Highchart.js。在该示例中,手动定义轴。但是,我想将我的数据从ajax作为X轴。这就是我处理数据的方式。

var bln     = "";
$.ajax({
    type     : "POST",
    url      : "some_function",
    async    : true,
    cache    : false,
    dataType : "json",
    data     : data,
    success  : function(response)
            {
               $.each(response.result_pakai, function(index, rows_pakai){
                    bln +=  rows_pakai.tgl+",";
               });
   })

这是X轴部分:

xAxis       : {
                 categories : [bln.slice(0,-1)],
                 crosshair  : true
              },

这就是我得到的:

enter image description here

那么,如何使数据遍布x轴?

javascript php jquery ajax highcharts
2个回答
3
投票

使用数组而不是字符串,

var bln = [];
$.ajax({
    type: "POST",
    url: "some_function",
    async: true,
    cache: false,
    dataType: "json",
    data: data,
    success: function(response) {
        $.each(response.result_pakai, function(index, rows_pakai) {
            bln.push(rows_pakai.tgl);
        });
    }); xAxis: {
    categories: bln,
    crosshair: true
})

0
投票

我这样做了一次,尝试这样的事情:

$.ajax({
        type:"POST",
        url:'url',
        data:{id:xx, interval:xxx},
        dataType: "json",
        success: function(response){
           favChart = Highcharts.stockChart('fav-chart-container', {
            chart: {
                type: 'area'
            },
            title: {
                text: 'XXX'
            },
            xAxis: {
                type: 'datetime',
                plotBands: response.datas
            },
            yAxis: {
                title: {
                    text: 'XXX'
                }
            },

            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            rangeSelector:{
                allButtonsEnabled: true,
                selected: 2
            },
            series: [{
                type: 'line',
                name: '2017',
                data: response.otherDatas
            }]

        });
    }
});
© www.soinside.com 2019 - 2024. All rights reserved.