系列在HighCharts中不起作用

Question

So I am creating a highcharts bar chart in a function inside my jQuery script, and it was working fine until I tried to incorporate different colors for each bar of the bar chart. My code is basically as follows

function BarChart(title, gType, list, numbers){
    var data = [];
    var allData = [];
    var series = [];
    var len = numbers.length;
    var colors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'];
    for(i=0; i<len; i++){
        data.push({
            y: numbers[i],
            color:colors[i]
        });
        allData.push(data[i]);
    }
    for(i=0; i<len; i++){
        series.push({
            name: list[i],
            data: allData[i]
        });
    }

Then I go on and create the chart and for series, I simply put

series: series

But no bars come up, only the legend, the title, the yAxis title and the xAxis title. If you can help me out that be great, hopefully my question is clear enough! Thanks!

PS

when I just put

series:[{
data: data
}] 

it works, but then all the legend says is Series 1 and I don't want that, I want it to actually show the name of each data with its corresponding color, thanks again!

Answer 1

I solved my own problem, but just for reference to anyone else who runs into this problem, its rater simple. Write this code,

plotOptions:{
series:{
    colorByPoint: true
}}

And highcharts will color each bar/column/line individually.

For reference here is the highcharts page that showed me this: http://api.highcharts.com/highcharts#plotOptions.bar

Answer 2

In case you were still looking into the "Series 1" problem in the legend. I found an interesting way to have each point be it's own series and still group correctly on the x-axis. It works by abusing bar stacking:

plotOptions: {
  series: {
    stacking: 'normal'
  }
},

and setting an increment x value on each data point:

data.forEach(function(val, i) {
    seriesData.push({
      name: categories[i],
      color: colors[(i % colors.length)],
      data: [{
        x: i,
        y: val
      }]
    });
  });

Here is a working fiddle built from an example I derived from the highcharts docs:

http://jsfiddle.net/89efeqhs/