javascript - Highcharts $.ajax() in jQuery - pie chart
2021腾讯云限时秒杀,爆款1核2G云服务器298元/3年!(领取2860元代金券),
地址:https://cloud.tencent.com/act/cps/redirect?redirect=1062
2021阿里云最低价产品入口+领取代金券(老用户3折起),
入口地址:https://www.aliyun.com/minisite/goods
JavaScript包括Ajax,jQuery是一个JavaScript轻量级框架。
I'm new to Highcharts and all of the help from here and some research has got me to my current status using Highcharts in my project. I'm still having an issue, the pie chart isn't loading data retrieved using $.ajax(). I have no idea what to try next. Any direction or help is much appreciated.
I'm getting data from MS SQL and using $.ajax().
I want to replicate what I made here: http://jsfiddle.net/bvaxmcLr/, but with my data from SQL. I can see the data on the page, but I can't get the chart to show. All of my code is below. Does anyone have any suggestions/ideas? Thanks!
JavaScript file
ajax不足 1.浏览器的支持度不够,IE 5以后才支持 2.破坏浏览器的前进,后退功能 3.搜索引擎的支持度不同 4.开发调试工具缺乏 三层方法 1.$.ajax()最底层方法 2.$.l
$(document).ready(function () {
var options = {
chart: {
renderTo: 'container',
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: null
},
subtitle: {
text: null
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y:.1f}</b>'
},
plotOptions: {
pie: {
colors: ['#739600', '#bb0826', '#fcc60A'],
size: '100%',
//innerSize: 100,
depth: 45,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Amount',
data: []
}]
}
$.ajax({
type: "POST",
url: "../../WebServices/ORM-CV-Service.asmx/fetch_A1ACicat",
data: {},
dataType: "json",
contentType: "application/json; charset=utf-8",
async: true,
success: OnSuccess,
error: OnError
});
function OnSuccess(data) {
$.each(data.d, function (key, value) {
options.series[0].data.push([value.Status_Color, value.Corrective_Action_ID]);
alert(value.Status_Color);
alert(value.Corrective_Action_ID);
//$("#ulItem").append("<ul>" + value.Status_Color + value.Corrective_Action_ID + "</ul>");
})
chart = new Highcharts.Chart(options);
}
function OnError(data) {
alert('fail');
}});
HTML file
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pie Chart Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
javascript
jquery
ajax
charts
highcharts
|
this question asked Dec 30 '14 at 19:37 Megatron 21 1 9 1 The AJAX call is succeeding? In
OnSuccess
what's the output of console.log(data.d)? My WAG is that
Corrective_Action_ID
is being returned as a string not an int. –
Mark Dec 30 '14 at 22:27 It succeeds, but I get a weird chart to show. I added {} to the data part of the series... data: [{}] and it makes a pie chart, but its adding an extra slice to the front. i have 2 items pulling from the db, but showing 3 on the chart, with the first one being empty with no data, but shows a slice. –
Megatron Dec 30 '14 at 22:58 The output from the console is Array [ Object, Object ] –
Megatron Dec 30 '14 at 23:08 The json is the same as you have in jsfiddle? –
Sebastian Bochan Dec 31 '14 at 9:38
|
Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.
简单总结: 1、JS是一门前端 语言。 2、Ajax是一门 技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新。 3、jQ
简单总结: 1、JS是一门前端 语言。 2、Ajax是一门 技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新。 3、jQ
相关阅读排行
- 1JavaScript、Ajax与jQuery的关系
- 2javascript 学习小结 (三) jQuery封装ajax尝试 by FungLeo
- 3IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取
- 4Jquery JavaScript解析Ajax返回的json数据(转)
- 5js day44 Jquery(筛选,事件,效果,Ajax,javascript跨域)