Làm cách nào để bạn thay đổi màu của từng danh mục trong biểu đồ cột highcharts?

Tôi có một biểu đồ cột có một số danh mục, mỗi danh mục có một điểm dữ liệu (ví dụ như thế này ). Có thể thay đổi màu của thanh cho từng loại không? tức là mỗi thanh sẽ có màu độc đáo của riêng nó thay vì tất cả đều là màu xanh lam?

Bạn cũng có thể đặt màu riêng lẻ cho từng điểm / thanh nếu bạn thay đổi mảng dữ liệu thành các đối tượng cấu hình thay vì số.

data: [
      {y: 34.4, color: 'red'},     // this point is red
      21.8,                        // default blue
      {y: 20.1, color: '#aaff99'}, // this will be greenish
      20]                          // default blue

Ví dụ trên jsfiddle

Ngoài ra, bạn có thể đặt tùy chọn:

  {plotOptions: {column: {colorByPoint: true}}}

để biết thêm thông tin đọc tài liệu

Thêm màu bạn muốn colorsvà sau đó đặt colorByPointthành true.

colors: [
'#4572A7', 
'#AA4643', 
'#89A54E', 
'#80699B', 
'#3D96AE', 
'#DB843D', 
'#92A8CD', 
'#A47D7C', 
'#B5CA92'
],

plotOptions: {
    column: {
        colorByPoint: true
    }
}

bản giới thiệu

Tài liệu tham khảo:

• http://api.highcharts.com/highstock#colors
• http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint

Có, đây là một ví dụ trong jsfiddle: http://jsfiddle.net/bfQeJ/

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

Ví dụ là biểu đồ hình tròn nhưng bạn có thể tô cả series với đủ màu sắc cho phù hợp với nội dung của trái tim mình =)

Bạn có thể thêm mảng màu vào đồ thị biểu đồ cao để thay đổi màu của đồ thị. Bạn có thể sắp xếp lại các màu này và bạn cũng có thể chỉ định màu của riêng mình.

$('#container').highcharts({
colors: ['#2f7ed8','#910000','#8bbc21','#1aadce'],
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},

Giống như đã đề cập bởi antonversal, đọc màu và sử dụng tùy chọn màu khi tạo đối tượng biểu đồ hoạt động.

var chart3 = new Highcharts.Chart({colors: ['#458006', '#B0D18C']});

chỉ cần đặt biểu đồ

$('#container').highcharts({
colors: ['#31BFA2'], // change color here
chart: {
        type: 'column'
}, .... Continue chart

Chỉ cần thêm cái này ... hoặc bạn có thể thay đổi màu sắc theo nhu cầu của mình.

Highcharts.setOptions({
        colors: ['#811010', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        plotOptions: {
            column: {
                colorByPoint: true
            }
        }

    });

thêm thuộc tính:

 colors: ['Red', 'Bule', 'Yellow']

Điều này đã làm việc cho tôi. Thật tẻ nhạt khi đặt tất cả các tùy chọn màu cho một loạt phim, đặc biệt nếu nó động

plotOptions: {
  column: {
   colorByPoint: true
  }
}

{plotOptions: {bar: {colorByPoint: true}}}