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'
}
}
是否嘗試過使用系列添加,嘗試添加顏色:「黑」,「藍」,「白」,「藍」,「藍」,「藍」,‘藍’]在選項:(只有在該系列中的第一種顏色得到應用。
任何一個可以請幫我在這。
感謝提前:)
完美答案! !非常感謝你 –
這真的很好,但傳說仍然保持隨機顏色,它不受該代碼的影響... – Kepedizer
完整答案在這裏: http://stackoverflow.com/questions/22408188/legend-indicator - 顏色 - 不改變,與巴色功能於谷歌,圖表 – Kepedizer