Highcharts - IE 中的格式化程序问题答案

【问题标题】：Highcharts - Formatter issues in IEHighcharts - IE 中的格式化程序问题
【发布时间】：2013-03-27 16:36:51
【问题描述】：

我无法让我的 yaxis 中的格式化程序函数在 IE 7 和 8 中工作。如果值大于零，它用于更改颜色。在其他浏览器和 IE 9 中运行良好。

我使用格式化程序来更改工具提示的颜色，并且在 IE 中有效，但 Y 轴中的以下内容无效。有什么想法吗？

yAxis: {
labels: {
        formatter: function() {
    if(this.value > 0 ){
        return  '<span style="fill: #4572a7;font-weight:800;">' + '$' + this.value + '</span>';
    }
    else {
        return  '<span style="fill: red;font-weight:800;">' + '-$' + Math.abs(this.value) + '</span>'
    }
    }
    },
    alternateGridColor: '#F5F5F5',
    minorTickInterval: 'auto',
    lineWidth: 1,
    tickWidth: 1
},

【问题讨论】：

标签： highcharts

【解决方案1】：

我相信这是因为 highcharts 在 IE7/8 中使用 VML，因为 svg 不受支持，而 fill CSS 属性是 svg 样式，因此不受支持。尝试使用颜色而不是填充。它应该适合每个人。

【讨论】：

【解决方案2】：

我建议将 useHTML 设置为 true，并用颜色 css 声明替换填充：

yAxis: {
        labels: {
            useHTML:true,
            formatter: function () {
                if (this.value > 0) {
                    return '<span style="color: #4572a7;font-weight:800;">' + '$' + this.value + '</span>';
                } else {
                    return '<span style="color: red;font-weight:800;">' + '-$' + Math.abs(this.value) + '</span>'
                }
            }
        },
        alternateGridColor: '#F5F5F5',
        minorTickInterval: 'auto',
        lineWidth: 1,
        tickWidth: 1
    },

【讨论】：