16

所以我知道如何在 Highchart 中改变 x 轴标签的颜色，这里有描述。

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

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

4

5 回答 5

36

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

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

在此处输入图像描述

于 2012-06-25T07:46:15.053 回答
4

我了解到您想更改 x 轴内特定项目的颜色。

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

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

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

参数

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

回调：函数

当图表对象完成加载和渲染时执行的函数。在大多数情况下，图表是在一个线程中构建的，但在 Internet Explorer 版本 8 或更低版本中，有时会在文档准备好之前启动图表，在这些情况下，图表对象不会在调用 new 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"});

    })
});​

希望这可以帮助你

于 2012-06-25T02:50:03.533 回答
2

请注意，当您使用 exporting.highcharts.com 上的 highcharts 导出服务器为您的图表呈现图像时，不会执行 javascript 格式化程序。

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

因此，例如，如果您想要两行红色的文本，您会得到：

<span style="color: #ff0000">First line</span> <br/> 
<span style="color: #ff0000">Second line</span>
于 2015-05-06T09:09:51.130 回答
1

我在甜甜圈饼图中使用 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;
           }
        }
    }
于 2015-12-22T21:37:16.840 回答
1 
 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;
                }
            }
        }
    },
于 2017-02-04T06:38:16.510 回答