Highchart - изменить цвет только одной метки по оси x

Question

Итак, я знаю, как изменить цвет меток оси X в Highchart, который описан здесь.

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

Но что, если я хочу, чтобы изменить цвет только один ярлык, а не все этикетки? Как применить стиль к отдельным ярлыкам?

Answer 1

Вы также можете использовать метку-форматировщик установить стиль. Полный пример на jsfiddle:

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

Answer 2

Я понял, что вы хотите изменить цвет для определенного элемента внутри оси x.

Я посмотрел API, но я не нашел простой способ сделать это.

Поскольку вы можете установить функцию обратного вызова для "картировать готовый событие":

Chart (параметры объектов, функция обратного вызова):

Параметры

опций: Object параметры диаграммы, так как задокументировано под заголовком «Объект опций» в меню слева.

обратный вызов: Функция

Функция для выполнения, когда объект графика завершения загрузки и рендеринга. В большинстве случаев диаграмма построена в одном потоке, но в 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"}); 

    }) 
});​ 

Надеется, что это помогает вам

Answer 3

Обратите внимание, что при использовании Highcharts экспортирующих серверов на exporting.highcharts.com для визуализации изображений для ваших графиков, JavaScript форматтеры не будет выполняться.

К счастью, highcharts 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> 

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