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

JS文件

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

            var str = '', displaystr = '失败原因';
            i = 0;
            $.each(data, function (infoIndex, info) {
                displaystr += '' + info.deal_memo + '';
            })
            displaystr += '订单数量';

            $.each(data, function (infoIndex, info) {
                str += '' + info.deal_memo + '' + info.count + '' + (parseFloat(info.count) / sum).toFixed(2) + '';
                displaystr += '' + info.count + '';
            })
            str += '';
            displaystr += '占比';
            $("#tb_grid").append(str);

            $.each(data, function (infoIndex, info) {
                displaystr += '' + (parseFloat(info.count) / sum).toFixed(2) + '';
            });
            displaystr += '';
            $("#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文件：

        



    

        

            
订单数量
占比
        
    

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