Highchart: можно ли изменить шрифт метки в Highchart одним нажатием кнопки?

Question

Ссылка на JFiddle: http://jsfiddle.net/z24ysp8m/3/ Вот код в беспокойстве:

$(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 
     }] 
    }); 
    // }); 
}); 

Я хочу, чтобы ось й не имеет меток при загрузке страницы (Причины, почему я добавил в качестве наполнителя текста с белым шрифтом связано с тем, что я не хочу, чтобы размер изменения диаграммы был нажат на кнопку). И после нажатия кнопки метка должна быть последовательно 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/