javascript - 低效函数 - 如何在 Highchart 中为数据点分配颜色

Question

我正在尝试创建一个调查进度条。根据进度，我想为每个数据点动态分配颜色。我已经做到了这一点，但似乎这些功能需要很长时间才能运行。至少，这是我的解释，因为我对其中的大部分内容都是陌生的。

所以我的问题是:如何更有效地为数据点分配颜色？如果我在一个函数中创建和存储多种颜色，我不确定如何引用 Highcharts 中的不同颜色。

http://jsfiddle.net/oskjerv/v4Lx69Lv/

希望我的问题对你们中的一些人有意义。

祝一切顺利。

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: [''],
        visible:false,
    },
    yAxis: {
        min: 0,
        visible:false
        
    },
    legend: {
        reversed: true,
        enabled:false
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            animation:false
        }
    },
    labels: {
      	enabled: false
   },
   tooltip: { 
   			enabled: false 
   },
   exporting:{
   			enabled:false
   },
   credits:{
   			enabled:false
   },
    series: [{
        name: 'Del1',
        data: [.20],
        color: getColourFirst()
    }, {
        name: 'Del2',
        data: [.20],
        color: getColourSecond()
    }, {
        name: 'Del3',
        data: [.20],
        color: getColourThird()
    },
    {
        name: 'Del4',
        data: [.20],
        color: getColourFourth()
    },
    {
        name: 'Del4',
        data: [.20],
        color: getColourFifth()
    }]
});

function getColourFirst(){
var colour1=['#D5D4D4'];
return colour1;
}
function getColourSecond(){
var colour2=['#D5D4D4'];
return colour2;
}
function getColourThird(){
var colour3=['#87bdd8'];
return colour3;
}
function getColourFourth(){
var colour4=['#87bdd8'];
return colour4;
}
function getColourFifth(){
var colour5=['#87bdd8'];
return colour5;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 200px; height: 100px; margin: 0 auto"></div>

Answer 1

这里的主要问题是你说的是color: ['#87bdd8']。这不是有效的格式。简而言之，您正在寻找 color: '#87bdd8' 。请参阅this updated JSFiddle有关演示，请参阅 the Colors description有关语法的更多详细信息。

说到如何解决颜色问题，有一百万种方法可以实现，但我可能会建议使用索引而不是所有单独的不可自动化函数名称。例如:

myColors = ['#D5D4D4','#D5D4D4','#87bdd8','#87bdd8','#87bdd8'];

function getColor(index) {
    return myColors[index%myColors.length];
}

或参见this JSFiddle demonstration .