隱藏熱圖基於條件的數據標籤

如何隱藏基於條件的熱圖的數據標籤，即，我想要隱藏（== 0或< 50）的所有數據標籤。由於Highcharts api中存在一個錯誤，當我恢復瀏覽器時，零點以不同的順序顯示。 Bug Link 隱藏熱圖基於條件的數據標籤

截至目前，我發現一個解決方法取代0'0'，但我不想在熱圖上顯示。這裏是小提琴jsfiddle，小提琴的工作，但在應用程序上實現時，它正在複製該錯誤。

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

    }); 
});

我使用碧玉工作室的解決辦法片段是

series.dataLabels.formatter:{function(){ if(this.point.value == 0) { return '0';} else { return this.point.value;}}}

來源

2015-04-23 GeekExplorer

的simples方法是使用datalabels formatter其允許添加的條件。

plotOptions:{ 
     series:{ 
      dataLabels:{ 
       formatter:function(){ 

        if(this.point.value >=50) 
         return this.point.value; 
       } 
      } 
     } 
    },

例子：http://jsfiddle.net/4aqhB/246/

來源

2015-04-23 08:50:48

喜塞巴斯蒂安，我想這個解決方案前，這是一個明細圖表所以當我點擊空白處/電池它給我一個「空URI」異常。我在碧玉工作室中使用它。所以我認爲的解決方法是，當條件失敗時根據條件顯示標籤使標籤顏色透明/無....因此它不會給我這種例外... – GeekExplorer

您能否使用您的代碼更新我的示例？ –

是的塞巴斯蒂安，我做到了，我得到的例外是來自碧玉。所以解決的辦法是根據條件使數據標籤透明來呈現數據標籤。我無法在jsfiddle中複製相同的異常....所以你可以幫助在條件下使「數據標籤透明」。 – GeekExplorer

隱藏熱圖基於條件的數據標籤

回答

相關問題