Highchart - Farbe nur für ein X-Achsen-Etikett ändern

Question

So kann ich die Farbe von X-Achsen-Etiketten in Highchart ändern, die hier beschrieben wird.

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

Aber was ist, wenn ich die Farbe nur ein Etikett ändern möchten, nicht alle Etiketten? Wie verwende ich Style für einzelne Labels?

Answer 1

Sie können auch den Label-Formatierer verwenden, um die Art zu setzen. Volle Beispiel auf jsfiddle:

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

Answer 2

Ich habe verstanden, dass Sie die Farbe für ein bestimmtes Element innerhalb der X-Achse ändern möchten.

Ich schaute auf die API, aber ich fand keine einfache Möglichkeit, es zu tun.

Da Sie einen Rückruf festlegen können für die "ready-Ereignis Chart":

Diagramm (Object Optionen, Funktion Rückruf):

Parameter

Optionen: Die Diagrammoptionen Objekt, dokumentiert unter der Überschrift "Das Optionsobjekt" im linken Menü.

Rückruf: Function

eine Funktion auszuführen, wenn das Diagrammobjekt Lade- und Darstellungs beendet ist. In meisten Fällen ist das Diagramm in einem Thread erstellt, aber in Internet Explorer Version 8 oder weniger das Diagramm wird manchmal initiiert, bevor das Dokument bereit ist, und in diesen Fällen wird das Diagrammobjekt nicht direkt nach dem Aufruf neuer Highcharts abgeschlossen .Diagramm(). Als Konsequenz sollte der Code , der auf dem neu erstellten Chart-Objekt beruht, immer im Callback ausgeführt werden. Das Definieren eines chart.event.load-Handlers ist gleichwertig.

Rückgabe: Eine Referenz auf das erstellte Chart-Objekt.

Sie können es in eine schmutzigen Art und Weise tun:

$(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"}); 

    }) 
});​ 

Hoffnung, dies hilft Ihnen

Answer 3

Beachten Sie, dass, wenn Sie die highcharts verwenden ausführenden Server auf exporting.highcharts.com Bilder für Ihre Grafiken zu machen, wird Javascript-Formatierer nicht ausgeführt werden.

Glücklicherweise Highcharts translates some html tags and style attributes von einzelnen Label und Titel-Strings in äquivalenten SVG-Styling, aber es ist ziemlich knifflig darüber, wie es das HTML analysiert. Tags werden entfernt, die einzelne in Anführungszeichen gesetzte Attribute verwenden. Sie müssen doppelte Anführungszeichen verwenden. Das Verschachteln eines <br/> Tags innerhalb eines anderen Tags funktioniert nicht.

Also, wenn Sie zum Beispiel rote zwei Zeilen Text farbig mag, erhalten Sie:

<span style="color: #ff0000">First line</span> <br/> 
<span style="color: #ff0000">Second line</span> 

Answer 4

ich dataLabels in einem Donut-Kreisdiagramm verwenden. Ich wollte die Beschriftungstextfarben für einzelne Tortenschnitte ändern, basierend auf bedingter Logik, Werte vergleichen.

Nur teilen, weil meine Suche mich hierher gebracht hat.

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