ハイチャート：ボタンをクリックするとハイチャートのラベルのフォントを変更できますか？ JFiddleへ

Question

リンク：

$(function() { 
    var chartData = [-5, 5, -10, -20]; 
    var timeStamps = []; 
    var index = 1; 
    var pWidth = 25; 

    $('#b').click(function(){ 
     timeStamps.push(new Date()); 
     var buttonB = document.getElementById('b'); 
     buttonB.disabled = true; 
     /* if(index == 1){ 
      $('#container').highcharts().xAxis[0].labels.style = {"color":"#6D869F","fontWeight":"bold"}; 
     }*/ 
     if(index <= chartData.length){ 
      $('#container').highcharts().series[0].remove();    
      $('#container').highcharts().addSeries({pointPlacement: 'on', data: [chartData[index - 1]], 
       pointWidth: pWidth}); 
      $('#container').highcharts().xAxis[0].setCategories([index]); 
      setTimeout(function(){index++;}, 2000); 

     } 
     if(index < chartData.length){ 
      setTimeout(function(){buttonB.disabled = false;}, 1500); 
     }else{ 
      setTimeout(function(){buttonB.style.visibility="hidden";}, 1500); 
     } 
     if(index == chartData.length - 1){ 
      setTimeout(function(){document.getElementById('b').innerHTML = 'Lasst Period';}, 1500); 
     } 
     console.log(timeStamps); 
    }) 
    // $(document).ready(function() { 
    Highcharts.setOptions({ 
     lang: { 
      decimalPoint: ',' 
     }, 
    }); 
    $('#container').highcharts({ 
     chart: { 
      type: 'column', 
      width: 170, 
      marginLeft: 74, 
      marginRight: 16, 
      marginBottom: 60 
     }, 
     title: { 
      text: '' 
     }, 
     colors: [ 
      '#0000ff', 
     ], 
     xAxis: { 
      title: { 
       text: '' 
       // offset: 23     
      }, 
      gridLineWidth: 1, 
      startOnTick: true, 
      tickPixelInterval: 80, 
      categories: ['Filler'], // used only to make sure that the x-axis of the two charts 
      // are aligned, not shown on the chart via setting the font color to white    
      min:0, 
      max:0, 
      labels: { 
       style: { 
        color: 'white' 
       } 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'Value' 
      }, 
      min: -20, 
      max: 20, 
      tickPixelInterval: 40 
     }, 
     plotOptions: { 
      series: { 
       animation: { 
        duration: 1000 
       } 
      } 
     }, 
     credits: { 
      enabled: false 
     }, 
     tooltip: { 
      formatter: function() { 
       return Highcharts.numberFormat(this.y, 2) + '%'; 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     series: [{ 
      data: [], 
      pointWidth: pWidth 
     }] 
    }); 
    // }); 
}); 

私は、x軸は、ページがロードされたラベルなし（私は白のフォントでフィラーテキストで追加された理由を持っていないことをしたい：ここhttp://jsfiddle.net/z24ysp8m/3/ が問題のコードですボタンをクリックするとグラフのサイズが変わらないようにするためです）。ボタンをクリックすると、ラベルは連続して1、2、3、4 ...

marginBottom（これはあまり正確ではありません）を設定する以外はどこにもありますか？

Answer 1

テキストラベルの塗りの色を変更するには、.css（）メソッドを使用できます。

ここでは、この方法についての情報を見つけることができます。 http://api.highcharts.com/highcharts#Element.css

Highcharts.each($('#container').highcharts().xAxis[0].labelGroup.element.children, function(p, i) { 
    $(p).css({ 
     fill: 'red' 
    }); 
    }); 

そして、ここであなたはそれが動作することができますどのように簡単な例を見つけることができます。 http://jsfiddle.net/z24ysp8m/6/