Question

我正在尝试为调查创建一个进度条。根据进度，我想动态地为每个数据点分配颜色。我已经设法了，但似乎功能需要很长时间才能运行。至少，这是我的解释，因为我对此很重要。

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

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

一切顺利。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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。

低效的功能 - 如何在Highchart中为数据点指定颜色

1 个答案: