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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何从ajax中创建数据成为Highchart中的X轴?相关的知识,希望对你有一定的参考价值。

我用这个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轴?

答案

使用数组而不是字符串,

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
})
另一答案

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

$.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
            }]

        });
    }
});

以上是关于如何从ajax中创建数据成为Highchart中的X轴?的主要内容,如果未能解决你的问题,请参考以下文章

使用ajax来自mysql的highchart数据

如何允许用户使用 Jquery/AJAX 在您的网站中创建/生成新网页?

如何在 AJAX 回调中转换我的图表数据创建

当我们从 s3 中的 csv 文件读取数据并在 aws athena 中创建表时如何跳过标题。

如何从数据库文件中创建 QByteArray

如何在 jquery 中创建关联数组并通过 ajax 发送以使用 php 解析?