关于在页面中引入柱状图（Highcharts）

最新推荐文章于 2023-08-12 14:38:26 发布

Silver gradient

最新推荐文章于 2023-08-12 14:38:26 发布

阅读量767

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/z19950712/article/details/120078037

版权

Highcharts 柱状图 JavaScript 数据可视化图表绘制

关键词由CSDN通过智能技术生成

1、我们需要在项目中引入highcharts.js文件

如果报错说未引入或者引入成功但是不能调用里面的方法，说明js放置的位置不对

2、然后我们在页面需要放置柱状图的地方声明一个div，作为后续引入使用；

<EF:EFRegion id="result1" title="统计显示">
    <body style="background-color:'#f7fbff';">
    <div id="container" style="height: 400px; margin: 0 auto"></div>
    </body>
</EF:EFRegion>

3、在相应的js中使用highCharts组件进行柱状图绘制；

这里建议把各个组件在function外面声明好，然后我们在function中直接对其赋值即可；

var chart = {
    type: 'column'
};
var title = {
    text: '安全检查隐患整改情况统计'
};
var credits = {
    enabled: false // 禁用版权信息
};
var xAxis = {
    categories:[]
};
var yAxis = {
    allowDecimals: false,
    min: 0,
    title: {
        text: ' 安全检查隐患整改情况统计'
    },
    stackLabels: {  // 堆叠数据标签
        enabled: true,
        style: {
            fontWeight: 'bold',
            // color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
    }
};
var tooltip = {
    formatter: function () {
        return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + this.y + '<br/>' +
            '总量: ' + this.point.stackTotal;
    }
};
var legend = {
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true,
    // backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
};
var plotOptions = {
    column: {
        stacking: 'normal',
        dataLabels: {
            enabled: true,
            // color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
            style: {
                // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
                textOutline: '1px 1px black'
            }
    }}
};
var series = [
    {
        name: '已整改',
        color: '#FFA500',
        data: [] //指定已整改的数组
    }, {
        name: '未整改',
        color: '#98FB98',
        data: []  //指定未整改的数组
    }
];
var json = {};

各个组件作用以及效果可以去官方文档仔细阅读；

一分钟上手highcharts！！！

4、在function方法中对各个组件进行赋值；

function changeData() {
    var eiInfo = new EiInfo();
    eiInfo.set("inqu_status-0-checkLevel",$("#inqu_status-0-checkLevel").val());
    eiInfo.set("inqu_status-0-checkUnits",$("#inqu_status-0-checkUnits").val());
    eiInfo.set("inqu_status-0-implementStartTime",$("#inqu_status-0-implementStartTime").val());
    eiInfo.set("inqu_status-0-implementEndTime",$("#inqu_status-0-implementEndTime").val());
    eiInfo.set("inqu_status-0-orgEname1",$("#inqu_status-0-orgEname1").val());
    eiInfo.set("inqu_status-0-orgEname2",$("#inqu_status-0-orgEname2").val());
    eiInfo.set("inqu_status-0-orgEname3",$("#inqu_status-0-orgEname3").val());
    EiCommunicator.send("AQYH0501", "getData", eiInfo,
        {
            onSuccess : function(ei) {
                //执行的功能
                var data1 = ei.get("data");
                // var xAxis1 = ei.get("xAxis");
                var xAxis1=[];//x轴标签数组
                var reform=[];//已整改数组
                var unreform=[];//未整改数组
                for (var b =0;b<data1.length;b++){
                        var dataInfo = data1[b];
                    reform.push(dataInfo["reform"])//已整改
                    unreform.push(dataInfo["unreform"])//未整改
                    xAxis1.push(dataInfo["dangeType"]=='10'?'地质环境隐患':'建设质量隐患');
                }
                xAxis.categories=xAxis1;  //X轴种类赋值
                json.chart = chart;
                json.title = title;
                json.credits = credits;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.tooltip = tooltip;
                json.legend = legend;
                json.plotOptions = plotOptions;
                json.series = series;
                json.series[0].data = reform;//已整改赋值
                json.series[1].data = unreform;//已整改赋值
                $('#container').highcharts(json);
            },
            onFail : function(ei) {
                IPLAT.NotificationUtil("获取数据失败", "error");
            }
        },{async: false});
}