2016-12-18 39 views
1

我必须更改高图中某列的颜色。我看到我们可以在整个系列中改变它,但一直没能弄清楚只有1列。这是我的系列是如何制造:使用默认颜色更改高图中列的颜色

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> 

有了这个代码,我只能够看到的只有1把我弄得设置颜色在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); 
} 

奏效了我。

注意:我保留的标记颜色是因为我正在渲染线条和柱状图。颜色适用于列,而标记适用于折线图。