highcharts绘图之数据库数据绘制柱形图实例

JS文件

$.getJSON('/Highcharts/Test?', function (data) {
var sum = 0;
$.each(data, function (infoIndex, info) {
sum += parseFloat(info["count"]);
})

var str = '<tbody>', displaystr = '<tr><td style="text-align:left">失败原因</td>';
i = 0;
$.each(data, function (infoIndex, info) {
displaystr += '<td>' + info.deal_memo + '</td>';
})
displaystr += '</tr><tr><td style="text-align:left"><img src="../../Content/images/red.png" />订单数量</td>';

$.each(data, function (infoIndex, info) {
str += '<tr><th>' + info.deal_memo + '</th><td>' + info.count + '</td><td>' + (parseFloat(info.count) / sum).toFixed(2) + '</td></tr>';
displaystr += '<td>' + info.count + '</td>';
})
str += '</tbody>';
displaystr += '</tr><tr><td style="text-align:left"><img src="../../Content/images/green.png" />占比</td>';
$("#tb_grid").append(str);

$.each(data, function (infoIndex, info) {
displaystr += '<td>' + (parseFloat(info.count) / sum).toFixed(2) + '</td>';
});
displaystr += '</tr>';
$("#datatable").append(displaystr);

//绘制图形
var data = {
table: 'tb_grid'
};
var chart = {
backgroundColor: '#34445e', type: 'bar',
};
var title = {
text: '订单监控', style: { color: '#ffffff', fontSize: "25px", fontWeight: "bold", },
};
var yAxis = {
min: 0, title: { text: null, align: 'high' }, labels: { overflow: 'justify', style: { color: '#67809c' } }, gridLineColor: '#3266ba',
};

var credits = {
enabled: false
};
var colors = ['#c76363', '#79d95e'];

var xAxis = { labels: { style: { color: '#67809c' } } };
var json = {};
json.chart = chart;
json.title = title;
json.data = data;
json.yAxis = yAxis;
json.credits = credits;
json.colors = colors;
json.xAxis = xAxis;
$('#container').highcharts(json);

HTML文件：

<div id="container" style="float:right;width:100%;height:550px;text-align:center;"></div>

<div>
<table id="tb_grid" style="width:100%;display:none;">
<thead>
<tr><th></th><th>订单数量</th><th>占比</th></tr>
</thead>
</table>
</div>

该实例是从数据库中读取数据更新到一个表格中，然后再从表格中读取数据更新到柱形图中。