如何使用jquery在ASP.NET中使用highcharts获取饼图。
问题描述:
<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/highcharts.js"></script>
<script src="Scripts/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "HighchartService.asmx/FruitAnalysis",
data: "{}",
dataType: "json",
success: function (Result) {
Result = Result.d;
var data = [];
for (var i in Result) {
var series = new Array(Result[i].Name, Result[i].Value);
data.push(series);
}
DrawChart(series);
},
error: function (Result) {
alert("Error");
}
});
});
function DrawChart(series) {
$('#container').highcharts({
chart: {
plotBackgroundColor:null,
plotBorderWidth: 1, //null,
plotShadow: false,
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
}
},
title: {
text: 'fruit market shares at a specific month, 2014'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Fruit share',
data: series
}]
});
}
</script>
数据存储在系列中,我测试了它,但情节并不像你分享的那样。你能让我知道我是否有任何错误。
提前感谢,
venkatesh。
data was storing in series i tested it but plot is not coming like as you shared .can you please let me know is there any mistake done by me.
thanks in advance,
venkatesh.
答
( document )。ready( function (){
(document).ready(function () {
.ajax({
type: POST,
contentType: application / json; charset = utf-8,
url: HighchartService.asmx / FruitAnalysis,
data: {} ,
dataType: json,
成功: function (Result){
Result = Result.d;
var data = [];
for ( var i in 结果){
var series = new 数组(Result [i] .Name,Result [i] .Value);
data.push(系列);
}
DrawChart(系列);
},
错误:功能(结果){
alert( 错误);
}
});
});
function DrawChart(series){
.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "HighchartService.asmx/FruitAnalysis", data: "{}", dataType: "json", success: function (Result) { Result = Result.d; var data = []; for (var i in Result) { var series = new Array(Result[i].Name, Result[i].Value); data.push(series); } DrawChart(series); }, error: function (Result) { alert("Error"); } }); }); function DrawChart(series) {
(' #container')。highcharts({
chart:{
plotBackgroundColor: null ,
plotBorderWidth: 1 , // null,
plotShadow: false ,
backgroundColor:{
linearGradient:[ 0 , 0 , 500 , 500 ],
止损:[
[ 0 ,' rgb(255,255,255)'],
[ 1 ,' rgb(200,200,255)']
]
}
},
title:{
text:' 特定月份的水果市场份额,2014'
},
工具提示:{
pointFormat:' {series .name}: {point.percentage:.1f}%'
},
plotOptions:{
pie:{
allowPointSelect : true ,
cursor:' pointer' ,
dataLabels:{
enabled: true ,
格式: ' {point.name} :{point.percentage:.1f}%',
style:{
color:(Highcharts.theme&& Highcharts.theme.contrastTextColor)|| ' black'
}
}
}
},
系列:[{
类型:' pie',
name:' Fruit share',
data:series
}]
});
}
< / script>
('#container').highcharts({ chart: { plotBackgroundColor:null, plotBorderWidth: 1, //null, plotShadow: false, backgroundColor: { linearGradient: [0, 0, 500, 500], stops: [ [0, 'rgb(255, 255, 255)'], [1, 'rgb(200, 200, 255)'] ] } }, title: { text: 'fruit market shares at a specific month, 2014' }, tooltip: { pointFormat: '{series.name}: {point.percentage:.1f}%' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '{point.name}: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, series: [{ type: 'pie', name: 'Fruit share', data: series }] }); } </script>
数据存储在系列中,我测试了它,但情节并不像你分享的那样。你能让我知道我是否有任何错误。
提前感谢,
venkatesh。
data was storing in series i tested it but plot is not coming like as you shared .can you please let me know is there any mistake done by me.
thanks in advance,
venkatesh.