ハイチャートの縦棒グラフに常に値を表示

Question

ハイチャートにはまったく新しいものではありませんが、まさに「パワーユーザー」ではありません。

これらのグラフは、ほとんどの場合常に値が低すぎるために値が表示されない列が少なくとも1つあるセキュリティレポートにあります。

デザイン要件は、ツールヒントを持たず、表示されているデータだけです。

たぶん私は厚いですが、私は答えを見て、それを試してもうまくいかないと思います。例えば、x軸などで "min"属性を設定しようとしましたが、 。これは実行可能ですか？もしそうなら、私はその属性を間違った場所に置いていると思います。ここで

は1個のコードサンプルがそこにあるの列を見て、一例である...しかし、それは同様に、以下の

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' 

       } 
      } 
     }] 
    }); 

}); 

Answer 1

あなた問題は、列が小さすぎてデータラベルを表示できないことがあることです。いくつかのオプションがあります： logarithmicスケールを使用すると、データの違いをあまり目立たなくすることができます。 http://jsfiddle.net/ur58nae5/1/

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

それとも、あなたはすべての列のdatalabelsをしたい列

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/