Highcharts Farbe der einzelnen Balken ändern

Question

In den letzten paar Stunden habe ich versucht, das zum Laufen zu bringen, aber ich kann nicht die Lösung finden. Ich habe bereits verschiedene Lösungen ausprobiert, die ich bei Google oder StackOverflow gefunden habe.

Momentan wird nur die erste Farbe erfasst und auf alle Balken angewendet.

$(function() { 
$('#container').highcharts({ 
    colors: ['yellow', 'red', 'green', 'purple', 'black'] 
    , chart: { 
     type: 'bar' 
    } 
    , title: { 
     text: '' 
    } 
    , subtitle: { 
     enabled: false 
    } 
    , exporting: { 
     enabled: false 
    } 
    , xAxis: { 
     categories: ['<?php echo $Product_1; ?>', '<?php echo $Product_2; ?>', '<?php echo $Product_3; ?>', '<?php echo $Product_4; ?>', '<?php echo $Product_5; ?>', '<?php echo $Product_6; ?>', '<?php echo $Product_7; ?>', '<?php echo $Product_8; ?>', '<?php echo $Product_9; ?>', '<?php echo $Product_10; ?>', '<?php echo $Product_11; ?>'] 
     , title: { 
      text: null 
     } 
    } 
    , yAxis: { 
     max: 100 
     , min: 0 
     , title: { 
      enabled: false 
     } 
     , labels: { 
      overflow: 'justify' 
     } 
    } 
    , tooltip: { 
     enabled: false 
    } 
    , plotOptions: { 
     bar: { 
      dataLabels: { 
       enabled: true 
      } 
     } 
    } 
    , legend: { 
     enabled: false 
    } 
    , credits: { 
     enabled: false 
    } 
    , series: [{ 
     name: 'Year 1800' 
     , data: [<?php echo $Score_1; ?>, <?php echo $Score_2; ?>, <?php echo $Score_3; ?>, <?php echo $Score_4; ?>, <?php echo $Score_5; ?>, <?php echo $Score_6; ?>, <?php echo $Score_7; ?>, <?php echo $Score_8; ?>, <?php echo $Score_9; ?>, <?php echo $Score_10; ?>, <?php echo $Score_11; ?>] 
     }] 
    }); 
}); 

Danke für Ihre Hilfe.

Answer 1

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column', 
      margin: [ 50, 50, 100, 80] 
     }, 
     plotOptions: { 
      column: { 
       colorByPoint: true 
      } 
     }, 
     colors: [ 
      '#ff0000', 
      '#00ff00', 
      '#0000ff' 
     ], 
     title: { 
      text: 'World\'s largest cities per 2008' 
     }, 
     xAxis: { 
      categories: [ 
       'Tokyo', 
       'Jakarta', 
       'New York', 
       'Seoul', 
       'Manila', 
       'Mumbai', 
       'Sao Paulo', 
       'Mexico City', 
       'Dehli', 
       'Osaka', 
       'Cairo', 
       'Kolkata', 
       'Los Angeles', 
       'Shanghai', 
       'Moscow', 
       'Beijing', 
       'Buenos Aires', 
       'Guangzhou', 
       'Shenzhen', 
       'Istanbul' 
      ], 
      labels: { 
       rotation: -45, 
       align: 'right', 
       style: { 
        fontSize: '13px', 
        fontFamily: 'Verdana, sans-serif' 
       } 
      } 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Population (millions)' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>'+ this.x +'</b><br/>'+ 
        'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) + 
        ' millions'; 
      } 
     }, 
     series: [{ 
      name: 'Population', 
      data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18, 
       17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8, 
       11.7, 11.2], 
      dataLabels: { 
       enabled: true, 
       rotation: -90, 
       color: '#FFFFFF', 
       align: 'right', 
       x: 4, 
       y: 10, 
       style: { 
        fontSize: '13px', 
        fontFamily: 'Verdana, sans-serif' 
       } 
      } 
     }] 
    }); 
}); 

Check here.

Also here.

Also.