Javascript Highchart - 仅更改一个 x 轴标签的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11182681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highchart - change color of one x-axis label only
提问by ericbae
So I know how to change the color of x-axis labels in Highchart, which is described here.
所以我知道如何在 Highchart 中更改 x 轴标签的颜色，这里有描述。
But what if I want to change the color of just ONE label, not all the labels? How do I apply style to individual labels?
但是如果我只想更改一个标签的颜色，而不是所有标签的颜色怎么办？如何将样式应用于单个标签？
回答by eolsson
You can also use the label-formatter to set the style. Full example on jsfiddle:
您还可以使用标签格式化程序来设置样式。关于jsfiddle 的完整示例：
labels: {
formatter: function () {
if ('Jun' === this.value) {
return '<span style="fill: red;">' + this.value + '</span>';
} else {
return this.value;
}
}
}
回答by Chris
I understood that you want to change the color for a specific item inside the x-axis.
我知道您想更改 x 轴内特定项目的颜色。
I looked at the API but i didn't found an easy way to do it.
我查看了 API，但没有找到简单的方法。
Since you can set a callback for the "chart ready event":
由于您可以为“图表就绪事件”设置回调：
Chart (Object options, Function callback) :
Parameters
options: Object The chart options, as documented under the heading "The options object" in the left menu.
callback: Function
A function to execute when the chart object is finished loading and rendering. In most cases the chart is built in one thread, but in Internet Explorer version 8 or less the chart is sometimes initiated before the document is ready, and in these cases the chart object will not be finished directly after calling new Highcharts.Chart(). As a consequence, code that relies on the newly built Chart object should always run in the callback. Defining a chart.event.load handler is equivalent.
Returns: A reference to the created Chart object.
图表（对象选项，函数回调）：
参数
选项：对象 图表选项，如左侧菜单中“选项对象”标题下所述。
回调：函数
当图表对象完成加载和渲染时执行的函数。在大多数情况下，图表是在一个线程中构建的，但在 Internet Explorer 8 或更低版本中，图表有时会在文档准备好之前启动，在这些情况下，图表对象不会在调用 new Highcharts.Chart() 后直接完成. 因此，依赖于新构建的 Chart 对象的代码应始终在回调中运行。定义一个 chart.event.load 处理程序是等效的。
返回： 对创建的 Chart 对象的引用。
You can do it in a dirty way:
你可以用肮脏的方式做到这一点：
$(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"});
})
});?
Hope this helps you
希望这对你有帮助
回答by Jorn van de Beek
Note that when you use the highcharts exporting server at exporting.highcharts.com to render images for your graphs, javascript formatters will not be executed.
请注意，当您使用位于 exporting.highcharts.com 的 highcharts 导出服务器为您的图形渲染图像时，将不会执行 javascript 格式化程序。
Fortunately highcharts translates some html tags and style attributesof individual label and title strings into equivalent SVG styling, but it is quite finicky about how it parses the html. It will strip tags that are using single quoted attributes, you need to use double quotes. Also, nesting a <br/>tag inside another tag will not work.
幸运的是 highcharts将个别标签和标题字符串的一些 html 标签和样式属性转换为等效的 SVG 样式，但它对如何解析 html 非常挑剔。它将删除使用单引号属性的标签，您需要使用双引号。此外，将一个<br/>标签嵌套在另一个标签中是行不通的。
So if you want two lines of text colored red for example, you get:
因此，如果您想要两行红色文本，例如，您会得到：
<span style="color: #ff0000">First line</span> <br/>
<span style="color: #ff0000">Second line</span>
回答by Spencer Sullivan
I am using dataLabels in a doughnut pie chart. I wanted to change the label text colors for individual pie slices, based on conditional logic, comparing values.
我在甜甜圈饼图中使用 dataLabels。我想根据条件逻辑更改单个饼图的标签文本颜色，比较值。
Just sharing because my search brought me here.
只是分享，因为我的搜索把我带到了这里。
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;
}
}
}
回答by Kondal
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;
}
}
}
},
