Question

如何使热图的绘图区域透明。我想删除图表中的所有白色块并使其透明，以便可以看到背景颜色。

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 40,
            backgroundColor: {
                linearGradient: { x1: 1, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0.23, 'rgb(240, 59, 9)'],
                    [0.5, 'rgb(255, 224, 80)'],
                    [0.67, 'rgb(54, 64, 207)'],
                    [0.99, 'rgb(13, 163, 35)'],
                    [1, 'rgb(217, 186, 50']
                ]
            },

        },


        title: {
            text: 'Sales per employee per weekday'
        },

        xAxis: {
            categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
        },

        yAxis: {
            categories: ['< 1%', '2-10%', '11-50%', '51-90%', '91-100%'],
            title: null
        },

        colorAxis: {
            min: 0,
            minColor: '#FFFFFF',
            maxColor:'#FFFFFF'
            //maxColor: Highcharts.getOptions().colors[0]
        },

        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 320
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                    this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
            }
        },

        series: [{
            name: 'Sales per employee',
            borderWidth: 1,
            data: [[0,0,0],[0,1,19],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115],[5,0,88],[5,1,32],[5,2,12],[5,3,6],[5,4,120],[6,0,13],[6,1,44],[6,2,88],[6,3,98],[6,4,96],[7,0,31],[7,1,1],[7,2,82],[7,3,32],[7,4,30],[8,0,85],[8,1,97],[8,2,123],[8,3,64],[8,4,84],[9,0,47],[9,1,114],[9,2,31],[9,3,48],[9,4,91]],
            dataLabels: {
                enabled: true,
                color: 'black',
                style: {
                    textShadow: 'none'
                }
            }
        }]

    });
});

Answer 1

Here is the fiddle solution

$(function () {

$('#container').highcharts({

    chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 40,
        plotBackgroundColor: {
            linearGradient: { x1: 1, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0.03, 'rgb(247, 88, 45)'],
                [0.5, 'rgb(255, 224, 80)'],
                [0.67, 'rgb(54, 64, 207)'],
                [0.99, 'rgb(13, 163, 35)'],
                [1, 'rgb(217, 186, 50']
            ]
        }
    },


    title: {
        text: 'Sales per employee per weekday'
    },

    xAxis: {
        categories: ['Insignificant', 'Minimum', 'Significant', 'Material', 'Critical']
    },

    yAxis: {
        categories: ['< 1%', '2-10%', '11-50%', '51-90%', '91-100%'],
        title: null
    },

    colorAxis: {
        min: 0,
        minColor: 'transparent',
        maxColor:'transparent'
        //maxColor: Highcharts.getOptions().colors[0]
    },

    legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25,
        symbolHeight: 320
    },

    tooltip: {
        formatter: function () {
            return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
        }
    },

    series: [{
        name: 'Sales per employee',
        borderWidth: 1,
        data: [[0,0,0],[0,1],[0,2,8],[0,3,24],[0,4,67],[1,0,92],[1,1,58],[1,2,78],[1,3,117],[1,4,48],[2,0,35],[2,1,15],[2,2,123],[2,3,64],[2,4,52],[3,0,72],[3,1,132],[3,2,114],[3,3,19],[3,4,16],[4,0,38],[4,1,5],[4,2,8],[4,3,117],[4,4,115]],
        dataLabels: {
            enabled: true,
            color: 'black',
            style: {
                textShadow: 'none'
            }
        }
    }]

});

}）;

使用highcharts的热图的透明绘图区域

1 个答案: