Highcharts设置柱形图表样式

function load_Cylindrical_chart() {
    var chart_xsys = Highcharts.chart('DivID', {   //DivID即要放置图表的html元素的id
        chart: {
            type: 'column',
            backgroundColor: '#FCFFC5' //图表的背景色,下面注释的为渐变色设置
            //        backgroundColor: {
            //        linearGradient: [0, 0, 500, 500],
            //        stops: [
            //            [0, 'rgb(255, 255, 255)'],
            //            [1, 'rgb(200, 200, 255)']
            //        ]
            //},
        },
        title: false,
        colors: ['#f7a35c', '#00BFFF', '#00FF00', '#FF00FF'],//柱状图的颜色,如果没有那么多柱状图的话,颜色会从左到右自动选取
        //colors: ['red', 'black', 'green', 'yellow'],
        xAxis: {   //X轴的数据
            categories: X_Name, //X_Name数据类型为Array
            crosshair: true,
            labels: {
                style: { //设置字体样式 
                    color: 'black'
                    //,fontWeight: 'bold'
                }
            }
        },
        yAxis: { //Y轴的样式
            allowDecimals: false,
            min: 0,
            title: false,
            tickWidth: 0,//去掉刻度
            gridLineWidth: 0,//去掉y轴方向的横线
            labels: {
                enabled: false
            }//去掉刻度数字
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        legend: {
            align: "top", //程度标的目标地位
            verticalAlign: "top", //垂直标的目标地位
            x: 0,
            y: 0,
            enabled: true  // 图例开关
        },
        plotOptions: {
            column: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true
                }
            },
            series: {
                events: {
                    click: function (e) {//图表的点击事件
                        var name = e.point.category.split(',');
                        open_function(name[0], name[1]);
                    }
                }
            }
        },
        series: [{
            name: '<b style="color:red">' + '上月' + "</b>",//设置字体样式
            data: lastMonth,//lastMonth的数据类型为Array
            dataLabels: {//设置柱上的数字显示样式
                enabled: true,
                color: 'black',
                align: 'center',
                x: 14,
                y: 0,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'

                }
            }
        }, {
            name: '<b style="color:red">' + '本月' + "</b>",//设置字体样式
            data: thisMonth,//thisMonth的数据类型为Array
            dataLabels: {//设置柱上的数字显示样式
                enabled: true,
                color: 'black',
                align: 'center',
                x: 14,
                y: 0,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'

                }
            }
        }]
    });
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值