jQuery 使用ajax json数据创建highchart
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19236113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
creating highchart with ajax json data
提问by Ray
I'm trying to create a simple chart in a page using mysql data retrieved using a mysql script
我正在尝试使用使用 mysql 脚本检索的 mysql 数据在页面中创建一个简单的图表
I don't understand how to integrate the ajax call with the data required for the chart. I don;t know enough about the various charting plugins to make my life easy and am currently trialing highchart.
我不明白如何将 ajax 调用与图表所需的数据集成。我对各种图表插件知之甚少，无法让我的生活变得轻松，目前正在试用 highchart。
My php script returns the following json:
我的 php 脚本返回以下 json：
[{"name":"golfers"},{"data":[5.7879,6.6286,6.1724,5.3125,7.1481,6.1333,4.5769]}]
My chart script is:
我的图表脚本是：
$(function () {
visitorData(function(data) {
console.info(data);
$('#chart1').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Average Visitors'
},
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
},
yAxis: {
title: {
text: 'Number of visitors'
}
},
series: data,
});
});
});
my function to make the ajax call:
我进行ajax调用的函数：
$.ajax({
url: '/visitdata',
type: 'GET',
async: true,
dataType: "json",
success: function (data) {
console.warn(data);
return data;
}
});
But at the moment nothing is being displayed.
但目前没有显示任何内容。
I'm not sure how to effectively make the ajax call and integrate it into the chart function. I decided on a callback based on earlier attempts and posts to ensure data is returned before creating the chart - is this bit correct?
我不确定如何有效地进行 ajax 调用并将其集成到图表功能中。我决定根据之前的尝试和帖子进行回调，以确保在创建图表之前返回数据 - 这是否正确？
I'm not 100% sure the json data is structured correctly
我不是 100% 确定 json 数据的结构正确
I'm not sure i;ve applied the data variable to the series correctly
我不确定我是否正确地将数据变量应用于系列
Basically - need a tutorial on this so I can get it working and experiment
基本上 - 需要一个关于这个的教程，这样我就可以让它工作和实验
All help appreciated
所有帮助表示赞赏
Thanks
谢谢
回答by ryuutatsuo
I think you cannot return values from the success call instead you would need to call a function instead. So set up your function that initializes your chart, and in the ajax success call that function with the data
我认为你不能从成功调用中返回值，而你需要调用一个函数。因此，设置初始化图表的函数，并在 ajax 成功中使用数据调用该函数
With your code example
使用您的代码示例
function visitorData (data) {
$('#chart1').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Average Visitors'
},
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
},
yAxis: {
title: {
text: 'Number of visitors'
}
},
series: data,
});
}
$(document).ready(function() {
$.ajax({
url: '/visitdata',
type: 'GET',
async: true,
dataType: "json",
success: function (data) {
visitorData(data);
}
});
});
回答by Barbara Laird
In your ajax success function call your visitorData function with data[1].data (since that's how your json is formatted)
在您的 ajax 成功函数中，使用 data[1].data 调用您的visitorData 函数（因为这就是您的 json 的格式）
$.ajax({
url: '/visitdata',
type: 'GET',
async: true,
dataType: "json",
success: function (data) {
visitorData(data[1].data);
}
});
also, your visitorData function def is odd.
此外，您的visitorData 函数def 很奇怪。
vistorData = function(data)
or
或者
function vistorData(data)
回答by Lem
//parse json response
var chartSeriesData = [];
var chartCategory = [];
$.each(response, function() {
if(this.name!="TOTAL" && this.no!="0") {
var series_name = this.name;
var series_data = this.no;
var series = [
series_name,
parseFloat(series_data)
];
chartSeriesData.push(series);
}
});
//initialize options for highchart
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'SalesOrder '
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
center:['60%','60%'],
size:150
,
dataLabels: {
enabled: true,
color: '#000000',
distance: 40,
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.y} '
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data:chartSeriesData //load array created from json
}]
}
//options.series[0].setData(datavaluejson);
var chart= $('#container').highcharts(options);
