始終顯示高位圖柱狀圖的價值

我並不是剛剛接觸highcharts，但我也不完全是「高級用戶」。始終顯示高位圖柱狀圖的價值

我在安全報告上有這些圖表，幾乎總是至少有一列沒有顯示值，因爲與其他值相比，值太低。

設計要求是這些沒有工具提示，只是顯示的數據。

也許我很厚，但是當我認爲我看到答案時，我嘗試了它，它不起作用...例如我試圖在x軸上設置「min」屬性等，但沒有運氣。這是可行的嗎？我假設它是，我把屬性放在錯誤的地方。

下面是一個例子，看看列一個代碼示例是在那裏...但它下面是以及

的jsfiddle鏈接：http://jsfiddle.net/ur58nae5/

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column', 
      backgroundColor: null, 
      style: { 
      fontFamily: 'helvetica, arial' 
      } 
     }, 
     colors:['#F5A623'], 
     credits: false, 
     title: { 
      text: 'Attacks by Risk Score' 
     }, 
     subtitle: { 
      text: 'Number of malicious IPs seen in this period based on maximum risk score' 
     }, 
     xAxis: { 
      type: 'category', 
      title: { 
      text: "Risk Score" 
      }, 
      labels: { 
       rotation: 0, 
       style: { 
        fontSize: '11px', 
        fontFamily: 'helvetica, arial, Verdana, sans-serif' 
       } 
      } 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Number of IP Addresses' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     tooltip: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'IPS', 
      data: [ 
       ['1', 21], 
       ['2', 109], 
       ['3', 112], 
       ['4', 125], 
       ['5', 106], 
       ['6', 112], 
       ['7', 143], 
       ['8', 207], 
       ['9', 386], 
       ['10', 908] 

      ], 
      dataLabels: { 
       enabled: true, 
       rotation: -90, 
       color: '#FFFFFF', 
       align: 'right', 
       y: 10, // 10 pixels down from the top 
       style: { 
        fontSize: '10px', 
        fontFamily: 'helvetica, arial, sans-serif', 
        textShadow: false, 
        fontWeight: 'normal' 

       } 
      } 
     }] 
    }); 

});

來源

2016-09-09 picus

所以你要對所有列datalabels塔外點？並且對於值低於特定閾值的列禁用工具提示？明白了嗎？ –

不明白你要求什麼。你能否更具體地確定你想要的是什麼，以及發生了什麼？ – jlbriggs

據我瞭解，你的問題在於有時候這些列太小而不能顯示數據標籤。您有幾個選項：您可以使用logarithmic比例來減少數據差異。 http://jsfiddle.net/ur58nae5/1/

yAxis: { 
     type:'logarithmic', 
     title: { 
      text: 'Number of IP Addresses' 
     } 
    },

或者你可以格式化小於某些閾值移動的標籤

series: [{ 
    name: 'IPS', 
    data: [ 
     {x:1, y:21, dataLabels: { color:'#000', y:-15}}, 
     ['2', 109], 
     ['3', 112], 
     ['4', 125], 
     ['5', 106], 
     ['6', 112], 
     ['7', 143], 
     ['8', 207], 
     ['9', 386], 
     ['10', 908] 

    ], 
    dataLabels: { 
     enabled: true, 
     rotation: -90, 
     color: '#FFFFFF', 
     align: 'right', 
     y: 10, // 10 pixels down from the top 
     style: { 
      fontSize: '10px', 
      fontFamily: 'helvetica, arial, sans-serif', 
      textShadow: false, 
      fontWeight: 'normal' 

     } 
    } 
}]

http://jsfiddle.net/ur58nae5/2/ http://jsfiddle.net/ur58nae5/3/

來源

2016-09-09 16:54:20

你的第二個解決方案很好地完成（尤其是第三小提琴）。爲此目的使用對數軸是一個幾乎普遍可怕的想法，但是，因爲它在許多情況下足以扭曲數據，對於條之間的比較而言幾乎沒有意義。 – jlbriggs

始終顯示高位圖柱狀圖的價值

回答

相關問題