Итак, я знаю, как изменить цвет меток оси X в Highchart, который описан здесь.
Но что, если я хочу изменить цвет только одной метки, а не всех ярлыков? Как применить стиль к отдельным ярлыкам?
Вы также можете использовать label-formatter для установки стиля. Полный пример jsfiddle:
labels: {
formatter: function () {
if ('Jun' === this.value) {
return '<span style="fill: red;">' + this.value + '</span>';
} else {
return this.value;
}
}
}
Я понял, что вы хотите изменить цвет для определенного элемента внутри оси x.
Я посмотрел API, но я не нашел простой способ сделать это.
Поскольку вы можете установить обратный вызов для "события готовности к диаграмме":
Диаграмма (опции объекта, обратный вызов функции):
Параметры
options: Object Параметры диаграммы, как указано в заголовке "Объект options" в левом меню.
обратный вызов: функция
Функция, выполняемая при завершении загрузки и рендеринга объекта диаграммы. В в большинстве случаев диаграмма построена в одном потоке, но в Internet Explorer версии 8 или менее диаграмма иногда инициируется перед документом готова, и в этих случаях объект диаграммы не будет завершен непосредственно после вызова нового Highcharts.Chart(). Как следствие, код который полагается на недавно построенный объект диаграммы, должен всегда запускаться в Перезвони. Определение обработчика chart.event.load эквивалентно.
Возвраты: ссылка на созданный объект диаграммы.
Вы можете сделать это грязным способом:
$(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"});
})
});
Надеюсь, это поможет вам
Обратите внимание, что когда вы используете экспортировать сервер с высоким качеством на exporting.highcharts.com для рендеринга изображений для ваших графиков, форматирование javascript не будет выполнено.
К счастью, highcharts переводит некоторые html-теги и атрибуты стиля отдельных ярлыков и строк заголовков в эквивалентный стиль SVG, но довольно тонко о том, как это сделать анализирует html. Он будет разделять теги, которые используют атрибуты с одним кавычком, вам нужно использовать двойные кавычки. Кроме того, вложенный тег <br/> внутри другого тега не будет работать.
Итак, если вы хотите, чтобы две строки текста были красными, например:
<span style="color: #ff0000">First line</span> <br/>
<span style="color: #ff0000">Second line</span>
Я использую 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;
}
}
}
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;
}
}
}
},