zoukankan      html  css  js  c++  java
  • HighCharts设置图表背景透明

    其实就一句话:

     backgroundColor: 'rgba(0,0,0,0)'

    完整示例:

    $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'column',
                    backgroundColor: 'rgba(0,0,0,0)'
                },
                title: {
                    text: 'Stacked column chart'
                },
                xAxis: {
                    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Total fruit consumption'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'right',
                    x: -70,
                    verticalAlign: 'top',
                    y: 20,
                    floating: true,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                    borderColor: '#CCC',
                    borderWidth: 1,
                    shadow: false
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.x +'</b><br/>'+
                            this.series.name +': '+ this.y +'<br/>'+
                            'Total: '+ this.point.stackTotal;
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                        }
                    }
                },
                series: [{
                    name: 'John',
                    data: [5, 3, 4, 7, 2]
                }, {
                    name: 'Jane',
                    data: [2, 2, 3, 2, 1]
                }, {
                    name: 'Joe',
                    data: [3, 4, 4, 2, 5]
                }]
            });
        });
        

    还有另外一个属性,plotBackgroundColor: null

    这个属性的意思是指图表部分,不含标题、说明信息,x轴y轴上的提示信息等部分的背景色,例如:

  • 相关阅读:
    Ant
    责任链模式
    日志logback
    知识点
    三个实例演示 Java Thread Dump 日志分析
    IDEA运行编译后配置文件无法找到,或配置文件修改后无效的问题
    IDEA创建MAVEN WEB工程
    多线程源码分析ThreadPoolExecutor
    解决
    微博关系服务与Redis的故事
  • 原文地址:https://www.cnblogs.com/haitao-fan/p/3383408.html
Copyright © 2011-2022 走看看