Làm thế nào tôi có thể thay đổi màu sắc của bản highcharts piechart?

Question

Tôi đang sử dụng highcharts để tạo piechart nhưng tôi gặp sự cố khi tải tập hợp màu tùy chỉnh cho biểu đồ của mình.

Đây là mã của tôi:

 <script type="text/javascript"> 
    $(function() { 
    Highcharts.setOptions({ 
    colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',  '#6AF9C4'] 
    }); 
    return new Highcharts.Chart({ 


     chart: { 
      renderTo: 'trailpiechart', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      backgroundColor: "#f8f8f8", 
      margin: [20, 20, 20, 20] 
     }, 


     credits: { 
      enabled: false 
     }, 

     title: { 
      text: caption 
     }, 
     tooltip: { 
      formatter: function() { 
       return this.y + ' links'; 
      } 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: false 
       }, 
       showInLegend: true 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      floating: false, 
      borderRadius: 0, 
      borderWidth: 0 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: data 
     }] 
    }); 
    }); 
</script> 

Biểu đồ hình tròn của tôi làm việc với mã này, nhưng nó chỉ sử dụng bảng màu đa sắc mặc định.

Bạn chỉ định bộ màu tùy chỉnh như thế nào?

Answer 1

Highcharts.setOptions({ 
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] 
}); 

Nhìn ví dụ sau http://jsfiddle.net/8QufV/

Answer 2

Tôi nghĩ rằng những gì bạn cần làm là thiết lập các màu sắc sử dụng theme thay vì setOptions như sau:

Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', 
          '#64E572', '#FF9655', '#FFF263', '#6AF9C4']}); 

Answer 3

Highcharts.setOptions({ 
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326',  '#6AF9C4'] 
}); 

Answer 4

Có một trang web mà nói đến những gì mỗi "màu sắc" tương ứng? Tất cả các câu trả lời ở đây cho thấy một cái gì đó như:

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4'] 

Nhưng những gì # 333, # CB2326, vv thực sự thay đổi? Rõ ràng tôi chỉ có thể thay đổi chúng và xem những gì thay đổi, nhưng nó sẽ tốt đẹp để có tài liệu tham khảo này có sẵn ở đâu đó.

Answer 5

Tôi gặp vấn đề tương tự. Trong highcharts.css có một phần được gọi là "Màu mặc định". Sau khi tôi xóa phần này, tôi có thể sử dụng các màu tùy chỉnh. Dù sao, tôi đoán bạn không cần highcharts.css nếu bạn sử dụng phiên bản v5.0.4 hoặc cao hơn.

Answer 6

Highcharts.Color (Highcharts.getOptions(). Màu sắc [0]). SetOpacity (0.5) .get ('rgba')]

Trong bảng xếp hạng cao màu sắc sẵn có chúng tôi có. Vì vậy, bạn cần thay đổi đường dẫn của màu [0] hoặc [1] ........ [6]

Answer 7

Đối với những người bạn mà thích để khởi tạo màu trong configs, bạn chỉ có thể đặt các màu trong phần plotOptions của đối tượng cấu hình như vậy:

..., 
plotOptions: { 
    pie: { 
    colors: [ 
    '#50B432', 
    '#ED561B', 
    '#DDDF00', 
    '#24CBE5', 
    '#64E572', 
    '#FF9655', 
    '#FFF263', 
    '#6AF9C4' 
    ], 
    allowPointSelect: true, 
    cursor: 'pointer', 
    dataLabels: { 
    enabled: false 
    }, 
    showInLegend: true 
} 
}, 
... 

Answer 8

Để trả lời câu hỏi @Loko Thiết kế của Web https://stackoverflow.com/a/38794379/7475250

Có trang web nào nói về nội dung "màu" tương ứng không? Tất cả các câu trả lời ở đây cho thấy một cái gì đó như:

colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4'] 

Nhưng những gì # 333, # CB2326, vv thực sự thay đổi? Rõ ràng là tôi chỉ có thể thay đổi chúng và xem những thay đổi nào, nhưng thật tuyệt khi có tài liệu tham khảo này ở đâu đó.

Tài liệu màu có sẵn here. Mặc dù hữu ích nhưng chúng không mô tả những gì thay đổi một màu cụ thể thực sự. Dưới đây là mô tả hay nhất của tôi.

Tính năng chống màu cho Highcharts các màu mà bạn muốn biểu đồ lặp lại. Ví dụ, nếu bạn đã có màu sắc sau prop.

colors: ['blue', 'green'] 

Miếng bánh của bạn sẽ luân phiên giữa màu xanh dương và xanh lục. Thay đổi màu xanh thành đỏ thì màu của bạn sẽ thay đổi giữa màu đỏ và màu xanh lục. Hãy thử nghiệm bằng cách sau fiddle

Mở rộng danh sách màu tăng số lượng màu trước khi lặp lại.

colors: ['blue', 'green', 'yellow'] 

Lặp lại các màu nếu có nhiều hơn 4 lát trong tập dữ liệu của bạn.