Highchart没有't显示图形:在序列中添加javascript数组时出错
Highchart doesn't show the graph : error adding javascript array in series
我正在使用柱状图绘制人口信息。我使用Ajax调用获取数据,并将它们存储在数组中
$(document).ready(function(){
var url = 'zone.php';
var zone_name = [];
var male_pop = [];
var female_pop = [];
$.getJSON(url, function(data) {
$.each(data, function(index, data) {
zone_name.push(data.name);
male_pop.push(parseInt(data.pop_male));
female_pop.push(parseInt(data.pop_female));
});
});
当我使用这些数据绘制图形时,图形不会显示出来。
$('#chart').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Popolution of Nepal zone wise'
},
subtitle: {
text: 'Source: cbs.gov.np'
},
xAxis: {
categories: zone_name,
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ''
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Male Population',
data: male_pop
}, {
name: 'Female Population',
data: female_pop
}, {
name: 'Total Population',
data: male_pop
}]
});
});
错误在series
部分。分配data: male_pop
不起作用。我该如何克服这个错误?
EDIT:控制台上male_pop数组的输出为
0: 676960
1: 1122885
2: 990638
3: 1401822
4: 1939350
5: 1500452
6: 706243
7: 1344568
8: 241786
9: 195827
10: 831283
11: 679340
12: 754277
13: 463610
我想问题是由于$.getJSON
的性质,当您在那之后调用:$('#chart').highcharts({
时,服务器的响应还没有到达。尝试将其更改为:
$.getJSON(url, function(data) {
$.each(data, function(index, data) {
zone_name.push(data.name);
male_pop.push(parseInt(data.pop_male));
female_pop.push(parseInt(data.pop_female));
});
// $('#chart').highcharts({
});
相关文章:
- 如何在ASP中为用户控件添加Javascript对象网
- 向Android浏览器添加JavaScript
- 如何在Opencart中动态添加JavaScript
- 如何根据需要优雅地添加javascript/css
- 在Android的Webview中添加Javascript
- Phonegap/Cordova:如何添加Javascript多点触摸事件
- 添加@javascript标记时,Cucumber中的HTTP身份验证失败
- 当我的表单中已经有一个操作时添加JavaScript
- 当我添加JavaScript时,链接按钮停止工作
- Ruby on Rails 4:在 Rails Web 应用程序中添加 Javascript 文件时遇到问题
- 可以'无法正确添加JavaScript值
- 在页面上添加javascript后呈现指令
- 如何在我更改输入时添加javascript操作'的内容
- 在Dotnet Highchart中添加javascript函数
- 如何在R Shiny应用程序中添加JavaScript来更改CSS文件
- 基于使用的ASP MVC EditorFor/Partial模板添加JavaScript引用
- 添加javascript变量以发送数据
- 动态添加javascript事件监听器,做一些无法解释的事情
- 使用wp_enque_script()在Wordpress-functions.php中添加Javascript
- 添加JavaScript onClick以动态生成asp按钮