highcahrts绘图之从数据库中读取数字绘制混合图形(柱形图+曲线图)实例

JS文件

$.getJSON('/Highcharts/Test?', function (data) {
var order_count = 0, sign_count = 0;
var str = '<tbody>';
$.each(data, function (infoIndex, info) {
if (info["sign_count"] != "")
sign_count = parseFloat(info["sign_count"]);
else
sign_count = 0;
if (info["order_count"] != "")
order_count = parseFloat(info["order_count"]);
else
order_count = 0;

str += '<tr><td style="width:200px;">' + info["expr_company"] + '</td><td style="width:200px;">' + order_count + '</td><td style="width:200px;">' + sign_count + '</td><td style="width:200px;">' + ((sign_count / order_count) * 100).toFixed(2) + '</td></tr>';
})
str += '</tbody>';
$("#tb_grid").append(str);

var data = {
table: 'tb_grid'
};
var chart = {
zoomType: 'xy',
backgroundColor: '#34445e'
};
var title = {
text: '订单表',
style: { color: '#ffffff', fontSize: "25px", fontWeight: "bold", }
};
var xAxis = {
crosshair: true,
lineColor: '',
labels: { style: { color: '#a9b5c2', fontSize: '20px' } }
};
var yAxis = [
//右Y轴
{
min: 0, max: 100, alignTicks: false, gridLineWidth: 0,
title: { text: null,/*style: {color: Highcharts.getOptions().colors[0]}*/ },
labels: { format: null, style: { color: '#a9b5c2' }, format: '{value} %', },
opposite: true
},
//左Y轴
{
min: 0,
labels: { format: null, style: { color: '#a9b5c2' } },
title: { text: null,/*style: {color: Highcharts.getOptions().colors[1]}*/ }
}];
var tooltip = { shared: true };
var series = [{ name: '订单数', type: 'column', yAxis: 1 },
{ name: '签收数', type: 'column', yAxis: 1},
{ name: '比率', type: 'line' }];
var plotOptions = {
column: { dataLabels: { enabled: true, style: { color: '#D7DEE9' } } },
line: {
dataLabels: { enabled: false, style: { color: '#D7DEE9' }, },
tooltip: { valueSuffix: '%' },
//点形状
marker: { radius: 5, symbol: 'triangle' },
}
};
var colors = ['#2ea7e1', '#f5e766', '#aae576'];
var credits = { enabled: false };

var json = {};
json.chart = chart;
json.title = title;
json.data = data;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.series = series;
json.colors = colors;
json.credits = credits;
j
4000
son.plotOptions = plotOptions;
$('#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;" border="1">
<thead>
<tr><th style="width:200px;" border="1">公司</th><th style="width:200px;" border="1">订单数</th><th style="width:200px;" border="1">签收数</th><th style="width:200px;" border="1">比率</th></tr>
</thead>
</table>
</div>


此实例是从数据库中读取数据并生成表格，然后将表格中的数据绘制成图形