ASP.NET中動態獲取資料使用Highcharts圖表控制元件
阿新 • • 發佈：2019-02-14
<%@ Page Title="" Language="C#" MasterPageFile="~/MyHome/MasterPage.master" AutoEventWireup="true" CodeFile="ryfb.aspx.cs" Inherits="MyHome_tixi_ryfb"%><asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"><script type="text/javascript" src="http://www.cnblogs.com/JScript/JQuery/jquery-1.4.2.min.js"
$(document).ready(
chart =new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: '人員體系分佈情況'
},
subtitle: {
text: 'Source: 下級人員'//圖示的副標題 },
xAxis: {
categories:
tickPixelInterval:0.2,
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: '人數 (個)',
align: 'high'
}
},
tooltip: {
formatter: function() {
return''+this.series.name +': '+this.y +' 個';
}
},
plotOptions: {
column: {
pointPadding: 0.3,
borderWidth: 0
},
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'top',
y: 50,
borderWidth: 1,
backgroundColor: '#FFFFFF',
borderColor: '#CCC',
shadow: true
},
credits: {
enabled: false
},
series: <%= returnValue %> //此處資料從後臺獲取
});
});
</script></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"><div class="profile"><div class="profile_title"><h2>人員分佈</h2></div></div><div id="container" style="width: 700px; height: <%=containerHeight%>; margin: 0 2em"></div><div class="result"></div></asp:Content>
$(document).ready(
chart =new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: '人員體系分佈情況'
},
subtitle: {
text: 'Source: 下級人員'//圖示的副標題 },
xAxis: {
categories:
tickPixelInterval:0.2,
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: '人數 (個)',
align: 'high'
}
},
tooltip: {
formatter: function() {
return''+this.series.name +': '+this.y +' 個';
}
},
plotOptions: {
column: {
pointPadding: 0.3,
borderWidth: 0
},
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'top',
y: 50,
borderWidth: 1,
backgroundColor: '#FFFFFF',
borderColor: '#CCC',
shadow: true
},
credits: {
enabled: false
},
series: <%= returnValue %> //此處資料從後臺獲取
});
});
</script></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"><div class="profile"><div class="profile_title"><h2>人員分佈</h2></div></div><div id="container" style="width: 700px; height: <%=containerHeight%>; margin: 0 2em"></div><div class="result"></div></asp:Content>