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>

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