Highchart - 僅更改一個x軸標籤的顏色

因此，我知道如何更改Highchart中x軸標籤的顏色，此處將對此進行介紹。Highchart - 僅更改一個x軸標籤的顏色

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

但是，如果我想換張標籤的顏色是什麼，不是所有的標籤？我如何將樣式應用於單個標籤？

來源

2012-06-25 ericbae

您還可以使用標籤格式設置樣式。在jsfiddle完整的示例：

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

enter image description here

來源

2012-06-25 07:46:15 eolsson

謝謝！這有助於很多！ – ericbae

我發現如果分類標籤不止一個單詞，只有第一個單詞會收到樣式。從v2.3.2開始，這顯然是[highcharts中的錯誤]（https://github.com/highslide-software/highcharts.com/issues/390）。一個簡單的補丁已發佈在我爲之工作的問題線程中。 – clayzermk1

某些對某些人來說可能並不明顯的東西：這種格式化邏輯也可以用於'yAxis'標籤。一個這樣的用法示例：爲百分比軸設置「min：0，minRange：100」，然後使用此設置爲所有高於100％的值設置自定義標籤顏色。 – ZaLiTHkA

我明白你想改變x軸內特定項目的顏色。

我看了一下API，但我沒有找到一個簡單的方法來做到這一點。

既然你可以設置一個回調，爲「圖表準備事件」：

圖（對象選項，回調函數）：

參數

選項：對象圖表選項，如記錄在標題「左側菜單中的選項對象」下。

回調：功能

當圖表對象被完成加載和渲染來執行的功能。在大多數情況下，圖表是在一個線程中構建的，但在Internet Explorer 版本8或更低版本中，圖表有時在文檔準備好之前啓動，在這些情況下，在調用新的Highcharts之後，圖表對象不會直接完成。圖表（）。因此，依賴新建圖表對象的代碼應始終運行在回調中。定義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-25 02:50:03 Chris

謝謝，夥計它的工作。我剛剛根據需要修改了代碼 –

注意，當您使用highcharts出口服務器在exporting.highcharts.com渲染你的圖形圖像，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>

來源

2015-05-06 09:09:51

我一個甜甜圈餅圖中使用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-22 21:37:16

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-04 06:38:16 Kondal

Highchart - 僅更改一個x軸標籤的顏色

回答

相關問題