2017-02-03 2 views
1

Я пытаюсь создать индикатор выполнения для опросов. В зависимости от прогресса я хотел бы динамически присваивать цвета каждой точке данных. Я справился с этим, но кажется, что функции требуют времени для запуска. По крайней мере, это моя интерпретация, поскольку я новичок в большей части этого.Неэффективные функции - как назначить цвет для datapoints в Highchart

Итак, мой вопрос: как я могу лучше назначить цвета для точек данных? Я не уверен, как ссылаться на разные цвета в 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: { 
 
     \t enabled: false 
 
    }, 
 
    tooltip: { 
 
    \t \t \t enabled: false 
 
    }, 
 
    exporting:{ 
 
    \t \t \t enabled:false 
 
    }, 
 
    credits:{ 
 
    \t \t \t 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>

ответ

0

Основная проблема здесь состоит в том, что вы говорите 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.

Смежные вопросы