利用Highcharts显示数据库的数据+饼状图解决方案
利用Highcharts显示数据库的数据+饼状图
<script type="text/javascript">
$(function () {
var rowData = JSON2.parse('<%=CurrentID %>');
var seriesData = "";
$(rowData).each(function (i, data) {
var item = { name: data.kind_name, data: [data.tongji_rate] };
if (seriesData == "") {
seriesData = JSON2.stringify(item);
}
else {
seriesData = seriesData + "," + JSON2.stringify(item);
}
});
var seriesDatas = JSON2.parse("[" + seriesData + "]");
var tab = $("#tabcontainer").ligerTab();
$('#container').highcharts({
chart: { type: 'pie' },
title: { text: '图书类别比例图' },
//series: seriesDatas
series: [{
？？？？？？？？？？？？？？？？？？？
《《《这里应该填什么？要获取到数据库的内容》》》
}]
});
</script>
</head>
<body>
<script type="text/javascript" src="/Highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="/Highcharts/js/modules/exporting.js"></script>
<div id="tabcontainer" style="margin:0px;">
<div title="饼状图" tabid="tab1">
<div id="container" style="min-width: 400px; height: 400px;width:100%; margin: 0 auto"></div>
</div>
</body>
</html>
表格为：
分类编码：kind_code
分类名name: "kind_name
数量"：ebook_amount
比例(%)：tongji_rate
------解决思路----------------------
------解决思路----------------------
利用数组的方式解决
<script type="text/javascript">
$(function () {
var rowData = JSON2.parse('<%=CurrentID %>');
var seriesData = "";
$(rowData).each(function (i, data) {
var item = { name: data.kind_name, data: [data.tongji_rate] };
if (seriesData == "") {
seriesData = JSON2.stringify(item);
}
else {
seriesData = seriesData + "," + JSON2.stringify(item);
}
});
var seriesDatas = JSON2.parse("[" + seriesData + "]");
var tab = $("#tabcontainer").ligerTab();
$('#container').highcharts({
chart: { type: 'pie' },
title: { text: '图书类别比例图' },
//series: seriesDatas
series: [{
？？？？？？？？？？？？？？？？？？？
《《《这里应该填什么？要获取到数据库的内容》》》
}]
});
</script>
</head>
<body>
<script type="text/javascript" src="/Highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="/Highcharts/js/modules/exporting.js"></script>
<div id="tabcontainer" style="margin:0px;">
<div title="饼状图" tabid="tab1">
<div id="container" style="min-width: 400px; height: 400px;width:100%; margin: 0 auto"></div>
</div>
</body>
</html>
表格为：
分类编码：kind_code
分类名name: "kind_name
数量"：ebook_amount
比例(%)：tongji_rate
------解决思路----------------------
series: [{ type: 'spline', name: '气温', marker: {
symbol: 'url(images/02.png)'
},data:<%= returnValue %> , yAxis: 0, color: '#FF9C23' }, { type: 'column', name: '降水', data:<%= returnValue1 %> , yAxis: 1, color: '#FFFFFF'}]
});
后台的代码：
public string returnValue1 ="";
public string xAxisCategories="";
public string containerHeight = "400px";
public string returnValue = "";
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = GetData();
if (dt.Rows.Count > 0)
{
string dataT = "[";
string dataY = "[";
string dataX = "[";
foreach (DataRow dr in dt.Rows)
{
dataT += "'" + dr["Time"].ToString() + "',";
dataX += dr["City"].ToString() + ",";
dataY += dr["Count"].ToString() + ",";
}
xAxisCategories=dataT.Substring(0, dataT.Length - 1) + "]";
returnValue = dataX.Substring(0, dataX.Length - 1) + "]";
returnValue1 = dataY.Substring(0, dataY.Length - 1) + "]";
}
}
}
//这里可以换成直接从数据库取数据，写到datatable中就可，
//测试数据，
private DataTable GetData()
{
DataTable tableInfo = new DataTable();
DataColumn dctime = new DataColumn("Time", Type.GetType("System.String"));
DataColumn dcCity = new DataColumn("City", Type.GetType("System.String"));
DataColumn dcCount = new DataColumn("Count", Type.GetType("System.Int32"));
tableInfo.Columns.Add(dctime);
tableInfo.Columns.Add(dcCity);
tableInfo.Columns.Add(dcCount);
DataRow dr = tableInfo.NewRow();
dr["Time"] = "1:00";
dr["City"] = "10";
dr["Count"] = "15";
tableInfo.Rows.Add(dr);
DataRow dr1 = tableInfo.NewRow();
dr1["Time"] = "2:00";
dr1["City"] = "12";
dr1["Count"] = "19";
tableInfo.Rows.Add(dr1);
DataRow dr2 = tableInfo.NewRow();
dr2["Time"] = "3:00";
dr2["City"] = "13";
dr2["Count"] = "25";
tableInfo.Rows.Add(dr2);
DataRow dr3 = tableInfo.NewRow();
dr3["Time"] = "4:00";
dr3["City"] = "14";
dr3["Count"] = "10";
tableInfo.Rows.Add(dr3);
DataRow dr4 = tableInfo.NewRow();
dr4["Time"] = "5:00";
dr4["City"] = "15";
dr4["Count"] = "11";
tableInfo.Rows.Add(dr4);
DataRow dr5 = tableInfo.NewRow();
dr5["Time"] = "6:00";
dr5["City"] = "16";
dr5["Count"] = "17";
tableInfo.Rows.Add(dr5);
DataRow dr6 = tableInfo.NewRow();
dr6["Time"] = "7:00";
dr6["City"] = "17";
dr6["Count"] = "20";
tableInfo.Rows.Add(dr6);
DataRow dr7 = tableInfo.NewRow();
dr7["Time"] = "8:00";
dr7["City"] = "12";
dr7["Count"] = "13";
tableInfo.Rows.Add(dr7);
return tableInfo;
}
------解决思路----------------------
利用数组的方式解决