undefinedfix
Sign in

How to add transparent background to histogram of highchart

Nerrix edited in Wed, 25 Jan 2023

If you want to achieve this, the rest of the background of the histogram is transparent white. How can I get it? I haven't found the configuration yet. Think about it first

<html>
<head>
    <meta charset="utf-8">
<link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">    <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<style>
    /* 隐藏掉标题和放大图标 */
    .highcharts-exporting-group,.highcharts-legend-item,.highcharts-title{
        display: none;
    }
    #container{
        margin-top: 50px;
    }
    #highcharts-h2m4xjq-0{
        padding-top: 50px;
    }
</style>
<body>
<!--
*************************************************************************
   Generated by JShare at 2020-06-24 17:55:02
   From: https://jshare.com.cn/demos/hhhhD8
*************************************************************************
 -->
    <div id="container" style="width:400px;height:400px"></div>
    <script>
    // 修改背景颜色为渐变色
    var colors = ['rgba(94, 235, 240, 1)', 'rgba(78, 178, 255, 1)'];
        Highcharts.getOptions().colors = Highcharts.map(colors, function (color) {
        return {
        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
            stops: [
                [0, 'rgba(94, 235, 240, 1)'],
                [1, 'rgba(78, 178, 255, 1)']
            ]
        };            
    });            
    var chart = Highcharts.chart('container',{
    chart: {
        backgroundColor: '#2696467',//设计背景颜色
        type: 'column'
    },
    title: {
        text: '月平均降雨量'
    },
    subtitle: {
        text: ''
    },
    credits: {
        enabled: false//隐藏掉水印
    },
    xAxis: {
        categories: [
            '南山','罗湖','莲塘','盐田'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        // title: {
        //     text: '降雨量 (mm)'
         title: {
                align: 'high',
                offset: 0,
                text: '(KM)',
                rotation: 0,
                y: -5
            },
        // },
        gridLineDashStyle: 'ShortDash',//修改标示线为虚线
    },
    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:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            borderWidth: 0,
            pointWidth:25, //柱子宽度
            
        }
    },
    // plotOptions: {
    // series: {
    // pointPadding: 0, //数据点之间的距离值
    // groupPadding: 0, //分组之间的距离值
    // borderWidth: 0,
    // shadow: false,
    // pointWidth:5 //柱子之间的距离值
    // }
    // }
    series: [{
        name: '柏林',
        data: [42.4, 33.2, 34.5, 39.7]
    }]
});

</script>
</body>
</html>`、
0 Replies