使用highcharts的熱圖透明繪圖區域

Question

如何將熱圖繪圖區域設置爲透明。 我想刪除圖表中的所有白色塊並使其透明，以便背景顏色可見。

refer this fiddle

$(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' 
      } 
     } 
    }] 

}); 

}）;