2016-12-18 43 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); 
} 

奏效了我。

注意:我保留的標記顏色是因爲我正在渲染線條和柱狀圖。顏色適用於列,而標記適用於折線圖。