Question

所以我知道如何在Highchart中更改x轴标签的颜色，这里将对此进行描述。

http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-style/

但是如果我想改变一个标签的颜色，而不是所有标签呢？如何将样式应用于单个标签？

Answer 1

您还可以使用label-formatter设置样式。 jsfiddle上的完整示例：

labels: {
    formatter: function () {
        if ('Jun' === this.value) {
            return '<span style="fill: red;">' + this.value + '</span>';
        } else {
            return this.value;
        }
    }
}

enter image description here

Answer 2

我知道您想要更改x轴内特定项目的颜色。

我查看了API，但我没有找到一种简单的方法。

由于您可以为“图表就绪事件”设置回调：

图表（对象选项，函数回调）：

参数

options：Object图表选项，如标题下所述   左侧菜单中的“选项对象”。

回调：功能

图表对象完成加载和渲染时执行的函数。在   大多数情况下，图表是在一个线程中构建的，但在Internet Explorer中   版本8或更低的图表有时在文档之前启动   准备就绪，在这些情况下，图表对象将无法完成   在调用新的Highcharts.Chart（）之后直接调用。因此，代码   依赖于新建的Chart对象应始终在   打回来。定义chart.event.load处理程序是等效的。

返回：对创建的Chart对象的引用。

你可以用脏的方式：

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            marginBottom: 80
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            labels: {

                style: {
                    color: 'red'
                }
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    },
    function(c){

        // this relies in that te xAxis is before the yAxis
        // also, setting the color with color: #ABCDEA didn't work
        // you have to use fill.
        $(".highcharts-axis:first text").each(function(i, label){
            var $label = $(label);
            if($label.children().text() === "Jun") {
                $label.css({fill: "blue"});                        

            }

        });

        // You also can to something like:
        $(".highcharts-axis:first text:eq(6)").css({fill: "green"});

    })
});

希望这有助于你

Answer 3

请注意，当您在exports.highcharts.com上使用highcharts导出服务器为图形渲染图像时，将不会执行javascript格式化程序。

幸运的是，将单个标签和标题字符串的高级字符translates some html tags and style attributes转换为等效的SVG样式，但它对如何解析html非常挑剔。它将剥离使用单引号属性的标记，您需要使用双引号。此外，将<br/>标记嵌套在另一个标记内也不起作用。

因此，如果你想要两行红色的文字，你会得到：

<span style="color: #ff0000">First line</span> <br/> 
<span style="color: #ff0000">Second line</span>

Answer 4

我在圆环饼图中使用dataLabels。我想根据条件逻辑更改单个饼图切片的标签文本颜色，比较值。

只是分享因为我的搜索把我带到了这里。

data: outerData,
dataLabels: {
    formatter:
        function () {
            if ((outerData[this.point.x].y > innerData[this.point.x].y) && (this.point.x != 0)) {
                return this.y > 0.1 ? '<span style="fill: red;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
            } else {
                return this.y > 0.1 ? '<span style="fill: #006400;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
           }
        }
    }

Answer 5

 xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        labels: {
            formatter: function () {
                if ('Jan' === this.value) {
                    return '<span style="fill: blue;">' + this.value + '</span>';
                } else {
                    return this.value;
                }
            }
        }
    },

高图 - 仅更改一个x轴标签的颜色

5 个答案: