• 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了注意

  • 相关阅读:
    沟通的5个步骤
    安家博客园,发表感想
    postman 简单教程-实现简单的接口测试
    Postman的基本使用
    面试题-如何测试一个APP
    Fiddler快捷方式导出jmeter脚本,傻瓜式
    Servlet学习(三)
    scala学习(一)
    白底抠图
    Servlet学习(二)
  • 原文地址:https://www.cnblogs.com/gxwa/p/9103321.html
Copyright © 2020-2023  润新知