Question

Ajax Call：

var dataString = "params="+globalData.cmpThemesData;
$.ajax( {
    type : "POST",
    url : e + "/home/comparethemes",
    dataType : JSON,
    data : dataString,
    beforeSend : function() {
    },
    success : function(data) {

        $.each(data, function(key, value) {

            var series = {}; 
            series.name = value.name;
            series.data = value.value;
            basicLineptions.series.push(series);
        });

            var chart = new Highcharts.Chart(basicLineptions);  
    }
});

来自Ajax Call的JSON响应：

[{
    "name": "Name1",
    "data": "33100,33100,33100,27100,27100,27100,33100,27100,27100,33100,27100,0"
},
{
    "name": "Name 2",
    "data": "33100,33100,33100,27100,27100,27100,33100,27100,27100,33100,27100,0"
},
{
    "name": "Name 3",
    "data": "33100,27100,33100,33100,33100,27100,27100,22200,27100,33100,74000,0"
},
{
    "name": "Name 4",
    "data": "18100,22200,33100,22200,14800,12100,18100,22200,12100,9900,14800,0"
}]

Basic Line Grapg选项：

 var basicLineptions = { 
 chart: {
 renderTo: 'content',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Compare Theme Data',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct',         'Nov', 'Dec']
},
yAxis: {
title: {
    text: 'Search Volumes'
},
plotLines: [{
    value: 0,
    width: 1,
    color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [],
exporting: {
   enabled: false
}
};

如何将此JSON响应传递给Highcharts Basic Line图以比较Jquery中的数据？

Basic Line Graph Data Comparison Graph

这就是我试图传递的方式：

$.each(data, function(key, value){
   var series = {};
   series.name = data.name;
   series.data = data.value;
   basicLineptions.series.push(series);
});
var chart = new Highcharts.Chart(basicLineptions);

谢谢...

Answer 1

你应该试试这个：

$.each(data, function(key, value) {
   var series = {};     //-^---^---------this should be used to refer the data.
       series.name = value.name; //<-----data should be referenced by value here
       series.data = parseInt(value.value); //<----here data is the key in the json.
       basicLineptions.series.push(series);
});
var chart = new Highcharts.Chart(basicLineptions);

在这里你必须按函数回调中提供的值引用数据，然后初始化图表。

更新

您需要更新：

var dataString = {"params":globalData.cmpThemesData}; //<---this one send obj
$.ajax({
type : "POST",
url : e + "/home/comparethemes",
dataType : "JSON", //<-------------this one "" should be in quotes
data : dataString,
beforeSend : function() {},
success : function(data) {
    $.each(data, function(key, value) {
        var series = {}; 
        series.name = value.name;
        series.data = parseInt(value.value);
        basicLineptions.series.push(series);
    });
    var chart = new Highcharts.Chart(basicLineptions);  
}
});

Answer 2

我认为问题在于您的数据（value.value）。这看起来像一个字符串，它应该是一个数组。尝试：

series.data=value.value.split(",");

将JSON响应传递给Highcharts Basic Line graph

2 个答案:

更新