Question

我使用Angular google chart（ng-google-chart）绘制图表。我使用http://bouil.github.io/angular-google-chart/#/generic/ColumnChart中提供的示例绘制了条形图。

我可以绘制条形图。但我想根据值动态地将颜色添加到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'
 }
}

尝试添加使用系列，尝试添加颜色：[＆＃39;黑色＆＃39;蓝色＆＃39;，＆＃39;白色＆＃39;蓝色＆＃39;，选项中的蓝色＆＃39;蓝色＆＃39;蓝色＆＃39;蓝色＆＃39;] :(仅系列中的第一种颜色正在应用。

任何人都可以帮助我。

先前感谢：）

Answer 1

通常，图表按数据系列颜色数据（即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'}]});

使用ng-google-chart自定义条形图

1 个答案: