2016-12-18 2 views
1

Мне нужно изменить цвет одного из столбцов в высоких диаграммах. Я вижу, что мы можем изменить его для всей серии, но не смогли определить его изменение всего за 1 столбец. Это как производится моя серия:Измените цвет столбца в highchart с цветом по умолчанию

var dates = []; 
var scores = []; 
vm.data.values.forEach(function (item) { 
    dates.push(datefilter(item.date, 'yyyy-MM')); 

    if (item.isCurrent) { 
     scores.push({ 
      y: item.score || 0, 
      marker: { 
       fillColor: '#FF0000', 
       lineWidth: 5, 
       lineColor: "#FF0000" 
       } 
      }); 
    } 
    else { 
     scores.push(item.score || 0); 
    } 
}); 

vm.chartConfig = { 
      options: { 
       chart: { 
        type: 'column' 
       }, 
       plotOptions: { 
        series: { 
         cursor: 'pointer' 
         }, 
         marker: { 
          lineWidth: 1, 
          symbol: 'circle' 
         } 
        } 
       } 
      }, 
      title: { 
       text: "Scores" 
      }, 
      xAxis: { 
       categories: dates 
      }, 
      yAxis: { 
       title: { 
        text: null 
       } 
      }, 
      series: [ 
       { 
        name: 'Scores', 
        data: scores, 
        color: "#249858" 
       } 
      ] 
     }; 
    }; 

HTML-компонента выглядит следующим образом:

<highchart config="vm.chartConfig"></highchart> 

С помощью этого кода я только мог видеть только один цвет, который я получил набор в объекте chartConfig. Тот, который я установил при создании моих данных серии в цикле foreach, никогда не вступает в силу. Любые указатели или ссылка plunkr были бы действительно замечательными.

ответ

0

Для тех, у кого есть подобные проблемы, цвет, который я устанавливал, был в неправильных местах. Изменение

OLD

if (item.isCurrent) { 
    scores.push({ 
     y: item.score || 0, 
     marker: { 
      fillColor: '#FF0000', 
      lineWidth: 5, 
      lineColor: "#FF0000" 
      } 
     }); 
} 
else { 
    scores.push(item.score || 0); 
} 

с НОВЫЙ КОД

if (item.isCurrent) { 
    scores.push({ 
     y: item.score || 0, 
     marker: { 
      fillColor: '#FF0000', 
      lineWidth: 5, 
      lineColor: "#FF0000" 
      }, 
     color: '#FF0000' 
     }); 
} 
else { 
    scores.push(item.score || 0); 
} 

сделал трюк для меня.

ПРИМЕЧАНИЕ: Цвет маркера, который я сохраняю, - это то, что я рисую диаграммы линий и столбцов. И цвет работает для столбца, когда маркер работает для линейной диаграммы.