高圖 - 僅更改一個x軸標簽的顏色

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;
        }
    }
}

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格式化程序。

幸運的是，highcharts 將單個標簽和標題字符串的一些html標簽和樣式屬性轉換為等效的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;
                }
            }
        }
    },