ng-google-chart柱狀圖中每列的自定義顏色

我正在使用ng-google-charts模塊爲我的角度應用程序構建谷歌圖表，我正在嘗試繪製一個柱狀圖。ng-google-chart柱狀圖中每列的自定義顏色

該代碼工作的圖表似乎被正確繪製，但我無法弄清楚如何在我生成的行中添加顏色，以便每列的顏色不同。

這是我的代碼，看着谷歌圖表文檔，似乎我應該能夠爲每個列分配一個十六進制代碼，但沒有看到使用角度的示例，沒有一個將它們的行構建爲字面對象就像我需要做的一樣。

var collsArray = []; 
    var rowsArray = []; 

    for (var i = 0; i < vm.projects.length ; i++) { 
     //this is where I build each data row and where I think I need to add the color 
     rowsArray.push({ 
      "c": [ 
       { 
        "v": vm.projects[i].name 
       }, 
       { 
        "v": vm.projects[i].developers, 
        "f": vm.projects[i].developers + ' developers working on ' + vm.projects[i].name 
       }] 
     }); 

    } 
    collsArray = [{id: 'project', label: 'Project', type: 'string'}, 
      {id: 'developers', label: 'Developers working', type: 'number'}]; 

    vm.chartProjects = { 
      "type": "ColumnChart", 
      "displayed": false, 
      "data": { 
      "cols": collsArray, 
      "rows": rowsArray 
      }, 
      "options": { 
      "isStacked": "true", 
      "fill": 0, 
      "width": '100%', 
      "height": '100%', 
      "displayExactValues": true, 
      "chartArea": { 
       "left": "1%", 
       "top": "1%", 
       "height": "98%", 
       "width": "98%" 
      } 
      }, 
      "formatters": {}, 
      "view": {} 
    };

來源

2016-04-21 George Bora

添加Style Column Role是爲單個條打上顏色的最簡單方法。

你可以嘗試這樣的事情......

var colorPallette = [ 
    '#7B241C', '#CB4335', '#FF9900', 'Gold', '#28B463', 
    '#196F3D', '#0D47A1', '#29B6F6', 'Indigo', 'Violet' 
]; 

var collsArray = []; 
var rowsArray = []; 

collsArray = [ 
    {id: 'project', label: 'Project', type: 'string'}, 
    {id: 'developers', label: 'Developers working', type: 'number'}, 
    {role: 'style', type: 'string'} // style column 
]; 

var colorIndex = -1; 
for (var i = 0; i < vm.projects.length ; i++) { 
    // manage color pallette 
    colorIndex++; 
    if (colorIndex === colorPallette.length) { 
    colorIndex = 0; 
    } 
    rowsArray.push({ 
    "c": [ 
     { 
     "v": vm.projects[i].name 
     }, 
     { 
     "v": vm.projects[i].developers, 
     "f": vm.projects[i].developers + ' developers working on ' + vm.projects[i].name 
     }, 
     { 
     "v": colorPallette[colorIndex] // style column 
     } 
    ] 
    }); 
}

This answer表明您可以使用各種顏色的定義。
FYI：這個選項不工作，材料圖表...

來源

2016-04-21 12:19:13 WhiteHat

，如果你不想用彩色調色板一塌糊塗，你可以在每個欄值添加爲一列，而不是一排，其中會迫使圖表顯示不同的顏色。 – WhiteHat

你的答案有效，但使用顏色數組或將列值添加爲列的最佳做法是什麼？ –

不確定_best practice_，但我更喜歡使用樣式列，因爲它允許完全控制和更多選項，而不僅僅是顏色。將行轉換爲列可能會造成混淆，並且還會使得自定義條間距，軸標籤，圖例條目等變得更加困難，因爲會爲每個列創建單獨的系列... – WhiteHat

ng-google-chart柱狀圖中每列的自定義顏色

回答

相關問題