Highchart：是否可以通过单击按钮更改Highchart中标签的字体？

链接JFiddle：http://jsfiddle.net/z24ysp8m/3/ 这里是关注代码：Highchart：是否可以通过单击按钮更改Highchart中标签的字体？

$(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轴具有当页面加载（我之所以用白色字体填充文本没有添加标签是由于我不希望点击按钮时更改图表的大小）。并点击按钮，标签应连续1,2,3,4 ...

除了设置marginBottom（这不是很精确）除了它吗？

来源

2016-08-16 Aqqqq

可以使用的CSS（），用于改变补法你的文字的颜色。在这里你可以找到简单的例子它是如何工作的：http://jsfiddle.net/z24ysp8m/6/ –

@GrzegorzBlachliński谢谢！ – Aqqqq

@GrzegorzBlachliński你应该发布你的答案 –

您可以使用.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/

来源

2016-08-16 14:05:15

Highchart：是否可以通过单击按钮更改Highchart中标签的字体？

回答

相关问题