javascript - Highcharts : is it possible to change the font of the label in Highchart via a click of a button?

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

我希望页面加载时x轴没有标签(我添加白色字体的填充文本的原因是我不希望图表的大小在单击时发生变化按钮)。单击按钮后，标签应连续为 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/