it-swarm.com.de

legen Sie für jede Spalte in den Highcharts verschiedene Farben fest

Ich muss verschiedene Farben für jede Spalte in der Highcharts-Grafik dynamisch einstellen. Mein Highcharts-Diagramm ist:

options = {
         chart: {
             renderTo: 'chart',
             type: 'column',
             width: 450
         },
         title: {
             text: 'A glance overview at your contest’s status'
         },
         xAxis: {
             categories: ['Approved Photos', 'Pending Approval Photos', 
                          'Votes', 'Entrants'],
             labels: {
                 //rotation: -45,
                 style: {
                     font: 'normal 9px Verdana, sans-serif, arial'
                 }
             }
         },
         yAxis: {
             allowDecimals: false,
             min: 0,
             title: {
                 text: 'Amount'
             }
         },
         legend: {
             enabled: false
         },
         series: []
     };
     series = {
         name: "Amount",
         data: [],
         dataLabels: {
             enabled: true,
             color: '#000000',
             align: 'right',
             x: -10,
             y: 20,
             formatter: function () {
                 return this.y;
             },
             style: {
                 font: 'normal 13px Verdana, sans-serif'
             }
     }
 };

Die Daten werden folgendermaßen eingestellt:

for (var i in Data) {
  if (parseInt(Data[i]) != 0) {
    series.data.Push(parseInt(Data[i]));
  } else {
    series.data.Push(null);
  }
}
options.series.Push(series);
chart = new Highcharts.Chart(options);

Wie kann ich für jeden Datenpunkt in dieser Schleife verschiedene Farben dynamisch einstellen?

44
user750487

Wenn Sie den Wert zu series.data hinzufügen, können Sie die Farbe auch mithilfe der Punktoptionen festlegen, z

series.data.Push({ y: parseInt(Data[i]), color: '#FF0000' });

Weitere Informationen zu den Punktoptionen finden Sie unter https://api.highcharts.com/class-reference/Highcharts.Point#color

51
escouser

Hier ist eine andere Lösung mit der neuesten Version von Highcharts (derzeit 3.0).

Setzen Sie die Option colorByPoint auf true und definieren Sie die gewünschte Farbsequenz .

options = {
    chart: {...},
    plotOptions: {
        column: {
            colorByPoint: true
        }
    },
    colors: [
        '#ff0000',
        '#00ff00',
        '#0000ff'
    ]
}

Hier ist ein Beispiel basierend auf Highcharts Spalte mit gedrehten Beschriftungen Demo

65
Jérôme

Versuchen Sie einen dieser Ansätze:

Ansatz 1:

Highcharts.setOptions({ colors: ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE'] });

Ansatz 2:

var colors = ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE', '#000'];

 $('#bar_chart').highcharts({
        chart: {
            type: 'column'              
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: ''
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: false                       
                }
            }
        },         

        series: [{
            name: '',
            colorByPoint: true,
            data: [{
                name: 'Blue',
                y: 5.78,
                color: colors[0]

            }, {
                name: 'Green',
                y: 5.19,
                color: colors[1]

            }, {
                name: 'Pink',
                y: 32.11,
                color: colors[2]

            }, {
                name: 'Yellow',
                y: 10.04,
                color: colors[3]

            }, {
                name: 'Purple',
                y: 19.33,
                color: colors[4]

            }]
        }]
    });

ich hatte Farben aus API-Antwort und 2 Serien. zweite Serie mit dynamischen Farben. 

das folgende Beispiel zeigt dynamische Farben während der Serienzuordnung. 

const response = [{
    'id': 1,
    'name': 'Mango',
    'color': '#83d8b6',
    'stock': 12.0,
    'demand': 28,
  },
  {
    id ': 2,
    'name': 'Banana',
    'color': '#d7e900',
    'stock': 12.0,
    'demand': 28,
  }
];
let chartData: {
  categories: [],
  series: []
};
chartData.categories = response.map(x => x.name);
chartData.series.Push({
  name: 'Series 1',
  type: 'column',
  data: response.map(x => x.demand)
});
chartData.series.Push({
  name: 'Series 2',
  type: 'column',
  data: response.map(x => ({
    y: x.stock,
    color: x.color // set color here dynamically
  }))
});
console.log('chartData: ', chartData);

sie können auch mehr über die Highcharts-Serie Point and Marker lesen.

0
Ravi Anand