hightchart单个柱状图实现之asp.net mvc

图例显示

实现结果：

 function BindGL() {
        var portTitle = '话机功能开通汇总';
        var xset = new Array();
        var yset = new Array();
        $.ajax({
            type: 'get',
            url: "../../ReportManage/HXReport/FunctionTotal",
            datatype: 'json',
            data: { deptname: $("#DeptName").attr("data-value") },
            success: function (data) {
                data = $.parseJSON(data);
                for (var i = 0; i < data.length; i++) {
                    xset[i] = parseInt(data[i].counts);
                    yset[i] = data[i].tele_business;
                }
                $('#container').highcharts({
                    chart: {
                        type: 'bar'
                    },
                    title: {
                        text: null
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: {
                        categories: yset,
                        title: {
                            text: null
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '数量(个)',
                            align: 'high'
                        },
                        labels: {
                            overflow: 'justify'
                        }
                    },
                    tooltip: {
                        valueSuffix: '个'
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -40,
                        y: 100,
                        floating: true,
                        borderWidth: 1,
                        backgroundColor: '#FFFFFF',
                        shadow: true
                    },
                    credits: {
                        enabled: false
                    },
                    series: [{
                        name: "数量",
                        showInLegend: false,
                        data: xset
                    }]
                });
            }
        });
    }

后台代码，就是一个普通的DataTable的列表查询语句， 有人会说前台都给出了，后面也帖出来呗，好吧，大家其实关心的点就在我画框框里面，其他的没有，多个柱状图的实现结果是一样的

 对了，这个把DataTable数据转成了json了注意

转载于:https://www.cnblogs.com/gxwa/p/9103321.html

• 点赞
• 收藏
• 分享
• 文章举报