我在循环中创建了多个highcharts，并根据数据给予不同的颜色，但当创建多个图表时，它们的颜色设置不一致。图表上的图例或颜色不一致（图表上的猕猴桃色与苹果色）。
我这里有一把小提琴：https://jsfiddle.net/7xzjwesr/6/

const initialSeries = [{
  name: 'image1',
  data: [
    ['kiwi', 14.6666666667],
    ['apple', 43.0277777778],
    ['orange', 22.6842105263],
  ]

},
];

const parsedData = initialSeries.map(s => ({
    name: s.name,
    data: s.data.map(d => [d[0].toString(), d[1]])
}));

Highcharts.chart('container0', {
  chart: {
    type: 'column',
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  colors: ["#058DC7", "#50B432", "#ED561B", "#DDDF00"],
  plotOptions: {
    column: {
                    colorByPoint: true,
                  },
  },
  series: parsedData
});
const initialSeries2 = [ {
  name: 'image2',
  data: [
    ['banana', 52.9565217391],
    ['apple', 57.5806451613]
  ]

},];

const parsedData2 = initialSeries2.map(s => ({
    name: s.name,
    data: s.data.map(d => [d[0].toString(), d[1]])
}));

Highcharts.chart('container1', {
  chart: {
    type: 'column',
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  colors: ["#058DC7", "#50B432", "#ED561B", "#DDDF00"],
  plotOptions: {
    column: {
                    colorByPoint: true,
                  },
  },
  series: parsedData2
});

const initialSeries3 = [ {
  name: 'image3',
  data: [
    ['kiwi', 409.0952380952],
['banana', 31.4495412844],
['apple', 89.6794871795],
['orange', 27.1818181818],
 ['chiku', 5.9166666667]
  ]
},];

const parsedData3 = initialSeries3.map(s => ({
    name: s.name,
    data: s.data.map(d => [d[0].toString(), d[1]])
}));

Highcharts.chart('container2', {
  chart: {
    type: 'column',
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  colors: ["#058DC7", "#50B432", "#ED561B", "#DDDF00"],
  plotOptions: {
    column: {
                    colorByPoint: true,
                  },
  },
  series: parsedData3
});
const initialSeries4 = [ {
  name: 'image4',
  data: [
   ['banana', 2352.1],
   ['apple', 28.7096774194]
  ]
},];

const parsedData4 = initialSeries4.map(s => ({
    name: s.name,
    data: s.data.map(d => [d[0].toString(), d[1]])
}));

Highcharts.chart('container3', {
  chart: {
    type: 'column',
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  colors: ["#058DC7", "#50B432", "#ED561B", "#DDDF00"],
  plotOptions: {
    column: {
                    colorByPoint: true,
                  },
  },
  series: parsedData4
});
const initialSeries5 = [{
  name: 'image5',
  data: [
   ['kiwi', 376.6538461538],
['banana', 469.8646616541],
['apple', 59.2481977343],
['chiku', 229.9]
  ]
}];

const parsedData5 = initialSeries5.map(s => ({
    name: s.name,
    data: s.data.map(d => [d[0].toString(), d[1]])
}));

Highcharts.chart('container4', {
  chart: {
    type: 'column',
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  colors: ["#058DC7", "#50B432", "#ED561B", "#DDDF00"],
  plotOptions: {
    column: {
                    colorByPoint: true,
                  },
  },
  series: parsedData5
});