2017-09-15 70 views
1

,關閉,進步等等,我得到不同類別的計數並將其存儲到一個HashMap ,然後從hashmap中檢索數據並使用下面的代碼在條形圖中顯示它。谷歌條形圖的條形顏色我使用谷歌柱狀圖代表設置的問題納入不同的類別,如開不改變

下面編輯的是我正在使用的代碼。我已經包括它在JSP頁面中

 google.charts.load('current', {'packages':['bar']}); 
     google.charts.setOnLoadCallback(drawBarChart); 

     function drawBarChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Status', 'No. of Issues', { role: 'style' }], 
      <%for(String SC:StatusCount.keySet()){ 
      %> 
      ['<%=SC.toString()%>',<%=StatusCount.get(SC.toString())%>, 'blue'], 
      <% 
      } 
      %> 
      <%for(String EC:EscCount.keySet()){ 
       %> 
       ['<%=EC.toString()%>',<%=EscCount.get(EC.toString())%>, 'red' ], 
       <% 
      } 
      %> 
     ]); 

     var options = { 
      chart: { 
      title: 'Performance', 
      }, 
      is3D: true, 
      titleTextStyle: { 
       fontName: 'Arial', 
       fontSize: 20 
      }, 

      'width':550, 
      'height':400, 
      backgroundColor: 'transparent', 
      bars: 'vertical' // Required for Material Bar Charts. 
     }; 

     var barchart = new google.charts.Bar(document.getElementById('barchart_material')); 

     barchart.draw(data, google.charts.Bar.convertOptions(options)); 
     } 

StatusCount用於對沒有上報的狀態計數和EscCount。我想改變Escalations欄的顏色。但是當我指定顏色時,它沒有變化。使用Google自己改變顏色的相同的東西。 請幫忙。在此先感謝

+0

'函數drawBarChart(){ VAR數據= google.visualization.arrayToDataTable([ [ '狀態',「號問題,{角色: '風格'}的], \t [ '封閉',14, '藍'], \t \t [ '待定',8, '藍'], \t \t [ '正在執行',20, '藍色'], \t \t [ '打開',24, '藍'], \t \t [ '上報',4, '紅'], \t ]) ;' 這個數組正在通過 – kishoresrivatsa

回答

0

Column Roles,包括'style'只能由經典圖表支持...

經典 - >google.visualization.BarChart & ColumnChart - >packages: ['corechart']

材料 - >google.charts.Bar - >packages: ['bar']

見下列工作片斷...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Status', 'No. of Issues', { role: 'style' }], 
 
    ['Closed',14, 'blue'], 
 
    ['On Hold',8, 'blue'], 
 
    ['In Progress',20, 'blue'], 
 
    ['Open',24, 'blue'], 
 
    ['Escalations',4, 'red'], 
 
    ]); 
 

 
    var chart = new google.visualization.BarChart(
 
    document.getElementById('chart_div') 
 
); 
 
    chart.draw(data, { 
 
    theme: 'material' 
 
    }); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

+0

我會在這個問題加我的完整代碼.. – kishoresrivatsa

+0

'google.charts.Bar'是_Material_圖,它不支持'「style'」的角色,請參閱[這個答案](https://開頭計算器.com/a/36452554/5090771)的選項... – WhiteHat