Question

我使用谷歌条形图将问题集表示为不同的类别，如打开，关闭，正在进行等，我获取不同类别的计数并将其存储到哈希映射，然后我从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栏的颜色。但是当我指定颜色时，它不会被改变。使用与谷歌本身改变颜色相同的东西。请帮助。提前致谢

Answer 1

Column Roles，包括'style'仅受经典图表支持...

经典 - ＆gt; google.visualization.BarChart＆amp; ColumnChart - ＆gt; packages: ['corechart']

材料 - ＆gt; google.charts.Bar - ＆gt; 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>

谷歌条形图条形图颜色不变

1 个答案: