通过AJAX HighCharts加载数据

问题描述

我已经遇到与ajaxing在一些样本JSON数据，过去几天的问题，从一个API使用Highcharts库来填充图表。

我试图chart.series [0] .DATA = json的，在我的Ajax回调，但没有类似的东西的作品。

我的JSON是数据的每一天，在一个月的数组。

<$p$p><$c$c>"{"month_mentions_graphic":[521,49,81,0,101,0,0,0,21,3071,0,0,0,0,0,1479,6124,2409,2608,0,0,3457,2057,2580,5876,4638,0,0,3337,3479,430]}"

下面是我的code：

  VAR图;

$（文件）。就绪（函数（）{

    图=新Highcharts.Chart（{
        图表： {
            renderTo：容器，
            输入：'行'，
            marginRight：130，
            marginBottom：25，
            事件：{
                负载：的RequestData
            }
        }，
        标题： {
            文字：MençõesMensais，
            X：-20 //中心
        }，
        x轴：{
            类别：[1,2,3,4,5]
        }，
        Y轴：{
            标题： {
                文字：Menções
            }，
            主要情节：[{
                值：0，
                宽度：1，
                颜色：＃808080
            }]
        }，
        传说： {
            布局：垂直，
            对齐：正确的，
            verticalAlign：'顶'，
            X：-10，
            Y：100，
            边框宽度：0
        }，
        系列： [
         {
            名称：提到'，
            数据： []
          }
        ]
    }）;
}）;


传播的RequestData（）{
    $阿贾克斯（{
        网址：API / V1 /仪表板/ month_mention_graphic'，
        键入：GET，
        数据类型：JSON，
        数据：{用户名：演示}，
        成功：功能（数据）{
            chart.series [0]的.data =数据;
        }，
        缓存：假的
    }）;
}
 

解决方案

呼叫chart.addSeries添加整个系列中一气呵成，仅仅加入了点阵列初始空系列，而不是：

 函数的RequestData（）{
    $阿贾克斯（{
        网址：API / V1 /仪表板/ month_mention_graphic'，
        键入：GET，
        数据类型：JSON，
        数据：{用户名：演示}，
        成功：功能（数据）{
            chart.addSeries（{
              名称：提到
              数据：data.month_mentions_graphic
            }）;
        }，
        缓存：假的
    }）;
}
 

I have been encountering issues for the past few days with ajaxing in some sample json data from an api to populate a chart using the Highcharts library.

I tried to chart.series[0].data = json and similar stuff in my ajax callback but nothing works.

my json is an array of data for each day in the month.

"{"month_mentions_graphic":[521,49,81,0,101,0,0,0,21,3071,0,0,0,0,0,1479,6124,2409,2608,0,0,3457,2057,2580,5876,4638,0,0,3337,3479,430]}"

Here's my code:

var chart;

$(document).ready(function() {

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25,
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Menções Mensais',
            x: -20 //center
        },
        xAxis: {
            categories: [1,2,3,4,5]
        },
        yAxis: {
            title: {
                text: 'Menções'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [
         {
            name: 'mentions',
            data: []
          }
        ]
    });
});


function requestData() {
    $.ajax({
        url: 'api/v1/dashboard/month_mention_graphic',
        type: "GET",
        dataType: "json",
        data : {username : "demo"},
        success: function(data) {
            chart.series[0].data = data;
        },
        cache: false
    });
}

解决方案

Call chart.addSeries to add the whole series in one go instead of adding just the point array to the initial empty series:

function requestData() {
    $.ajax({
        url: 'api/v1/dashboard/month_mention_graphic',
        type: "GET",
        dataType: "json",
        data : {username : "demo"},
        success: function(data) {
            chart.addSeries({
              name: "mentions",
              data: data.month_mentions_graphic
            });
        },
        cache: false
    });
}

这篇关于通过AJAX HighCharts加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！