Highchart - thay đổi màu của một nhãn x trục chỉ

Question

Vì vậy, tôi biết cách thay đổi màu của nhãn trục x trong Highchart, được mô tả ở đây.

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

Nhưng nếu tôi muốn thay đổi màu sắc của chỉ ONE nhãn, không phải tất cả các nhãn? Làm cách nào để áp dụng kiểu cho từng nhãn?

Answer 1

Bạn cũng có thể sử dụng nhãn-formatter để thiết lập các phong cách. ví dụ đầy đủ về jsfiddle:

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

Answer 2

Tôi hiểu rằng bạn muốn thay đổi màu cho một mục cụ thể bên trong trục x.

Tôi đã xem API nhưng tôi không tìm thấy cách dễ dàng để thực hiện.

Vì bạn có thể thiết lập một cuộc gọi lại cho "vạch kiện đã sẵn sàng":

Chart (tùy chọn Object, Chức năng gọi lại):

thông số

lựa chọn: Object Các tùy chọn biểu đồ, như được ghi trong tiêu đề "Đối tượng tùy chọn" trong menu bên trái.

callback: Chức năng

Một chức năng để thực hiện khi đối tượng biểu đồ được tải xong và rendering. Trong hầu hết các trường hợp biểu đồ được xây dựng trong một chuỗi, nhưng trong Internet Explorer phiên bản 8 hoặc ít hơn, biểu đồ đôi khi được bắt đầu trước khi tài liệu sẵn sàng và trong trường hợp này, đối tượng biểu đồ sẽ không được hoàn thành ngay sau khi gọi Highcharts mới .Đồ thị(). Kết quả là, mã dựa trên đối tượng Biểu đồ mới được xây dựng nên luôn chạy trong gọi lại . Việc xác định trình xử lý chart.event.load tương đương.

Trả về: Tham chiếu đến đối tượng Biểu đồ đã tạo.

Bạn có thể làm điều đó một cách bẩn :

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

    }) 
});​ 

Hy vọng điều này sẽ giúp bạn

Answer 3

Lưu ý rằng khi bạn sử dụng highcharts xuất khẩu máy chủ tại exporting.highcharts.com để render hình ảnh cho đồ thị của bạn, và định dạng javascript sẽ không được thực thi.

May mắn là highcharts translates some html tags and style attributes của từng nhãn và chuỗi tiêu đề thành kiểu dáng SVG tương đương, nhưng nó khá khó hiểu về cách phân tích cú pháp html. Nó sẽ loại bỏ các thẻ đang sử dụng các thuộc tính trích dẫn đơn lẻ, bạn cần phải sử dụng dấu ngoặc kép. Ngoài ra, việc lồng thẻ <br/> vào một thẻ khác sẽ không hoạt động.

Vì vậy, nếu bạn muốn hai dòng văn bản màu đỏ ví dụ, bạn nhận được:

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

Answer 4

Tôi đang sử dụng dataLabels trong một biểu đồ bánh rán bánh. Tôi muốn thay đổi màu văn bản nhãn cho các lát bánh riêng lẻ, dựa trên logic điều kiện, so sánh các giá trị.

Chỉ chia sẻ vì tìm kiếm của tôi đã đưa tôi đến đây.

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