2014-07-16 35 views
0

我使用Angular google chart(ng-google-chart)繪製圖形。 我使用http://bouil.github.io/angular-google-chart/#/generic/ColumnChart中提供的示例繪製了條形圖。使用ng-google-chart自定義條形圖

我可以繪製條形圖。 但我想動態地將顏色添加到基於值的Bar中。 我無法使用https://github.com/bouil/angular-google-chart來實現此目的。

下面是我的代碼示例:

$scope.arrVal2 = [22,31,90,50,80,25,15]; 
$scope.chartObj1 = []; 
$scope.chartObj2 = []; 

$scope.createChartObj = function() 
{ 

    for(var m=0; m < $scope.arrVal2.length; m++) 
    { 
     console.log('val of m ----- '+m); 
     $scope.chartObj2.push({c:[{v:m+1},{v:$scope.arrVal2[m]} 
      ]}) 
    } 

} 

$scope.chartObject2.data = {"cols": [ 
    {id: "day", label: "Day", type: "string"}, 
    {id: "events", label: "Event", type: "number"} 
    ], "rows": $scope.chartObj2 
}; 


$scope.chartObject2.type = 'ColumnChart'; 
$scope.chartObject2.options = { 
    'title': 'PREVIOUS 7 WEEKS', 
    'titleTextStyle': {color: '#FFFFFF', fontSize: 13,bold: false}, 
    'backgroundColor': '#555555', 
    legend: 'none', 
    series: { 
    0: { color: '#e2431e' }, 
    1: { color: '#e7711b' }, 
    2: { color: '#f1ca3a' }, 
    3: { color: '#6f9654' }, 
    4: { color: '#1c91c0' }, 
    5: { color: '#43459d' }, 
    6: { color: '#43459d' } 
    }, 
    colors: ['#6EAF19', '#E2B400', '#DF0000','#DF0000','#DF0000','#DF0000','#DF0000'], 
    is3D:true, 
    animation:{ 
     duration: 3000, 
     easing: 'out', 
    }, 
    hAxis: { 
      gridlines: {color: 'transparent'}, 
      textPosition: 'none' 
    }, 
    vAxis:{ 
     minValue:0, 
     maxValue:100, 
     baselineColor: 'none', 
     gridlineColor: 'none', 
     gridlines: {color: 'transparent'}, 
     textPosition: 'none' 
} 
} 

是否嘗試過使用系列添加,嘗試添加顏色:「黑」,「藍」,「白」,「藍」,「藍」,「藍」,‘藍’]在選項:(只有在該系列中的第一種顏色得到應用。

任何一個可以請幫我在這。

感謝提前:)

回答

4

通常情況下,按數據系列圖表顏色數據(即DataTable列);如果要色獨立吧,你需要使用「風格」的角色欄設置顏色:

$scope.chartObject2.data = { 
    "cols": [ 
     {id: "day", label: "Day", type: "string"}, 
     {id: "events", label: "Event", type: "number"}, 
     {role: "style", type: "string"} 
    ], 
    "rows": $scope.chartObj2 
}; 

構建行時,加入顏色:

$scope.chartObj2.push({c:[{v:m+1},{v:$scope.arrVal2[m]},{v:'#e2431e'}]}); 
+0

完美答案! !非常感謝你 –

+0

這真的很好,但傳說仍然保持隨機顏色,它不受該代碼的影響... – Kepedizer

+0

完整答案在這裏: http://stackoverflow.com/questions/22408188/legend-indicator - 顏色 - 不改變,與巴色功能於谷歌,圖表 – Kepedizer

相關問題