Google Material图表柱状图（条形图）自定义列颜色不工作

本文介绍了Google Material图表柱状图（条形图）自定义列颜色不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在 HTML-JavaScript 中使用 google图表绘制一个简单的柱状图 >。我已使用 Google物资图CDN 绘制有4行4种不同颜色的柱形图。

I want to draw a simple column chart in HTML-JavaScript using google chart.I have used Google materiel chart CDN to draw a column chart having 4 rows with 4 different colors.

我试过很多选择，但没有什么工作正常。当我使用 colors：['＃b0120a'，'＃004411'，'＃ffab91'，'＃004411'] 4列。我也尝试过 {role：'style'} ，但仍然无法工作。

I have tried plenty of options but nothing is working properly. when I have used the colors: ['#b0120a', '#004411', '#ffab91', '#004411'] only the first color is being displayed in all the 4 columns. I have also tried {role:'style'} but still not working.

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      //google.charts.load('current', {'packages':['bar']});
      google.charts.load('visualization', '1', {packages: ['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        /*var data = google.visualization.arrayToDataTable([
          ['Class', 'Total',{role: 'style'}],
          ['A', 10,'color: #b0120a'],
          ['B', 30,'color: #004411'],
          ['C', 20,'color: #ffab91'],
          ['D', 30,'color: #004411']
        ]);*/
        var data = google.visualization.arrayToDataTable([
          ['Class', 'Total'],
          ['A', 10],
          ['B', 30],
          ['C', 20],
          ['D', 30]
        ]);

        var options = {
          isStacked: true,
          title: 'Class wise total students',
          colors: ['#b0120a', '#004411', '#ffab91', '#004411'],
         };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>

图表如下：

The chart is like:

但我想为4列使用4种不同的颜色。
提前感谢。

But I want 4 different colors for 4 columns.Thanks in advance.

推荐答案

Yaa，最后我做了一个正确的，我想成为。如果您需要某个时间，请参阅下面的代码。

Yaa, at last I made this one correct and exactly I wanted to be. Please see the code below, if you required sometime.

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('visualization', '1.1', {packages: ['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Class', 'Total',{role: 'style'}],
          ['A', 10,'color: #b0120a'],
          ['B', 30,'color: #004411'],
          ['C', 20,'color: #ffab91'],
          ['D', 30,'color: #004411']
        ]);

        var options = {
          isStacked: false,
          title: 'Class wise total students',
         };

        var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
        chart.draw(data, options);
      }
    </script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>

我需要更改图表的定义这里。从 var chart = new google.charts.Bar（document.getElementById（'columnchart_material'））; 到修改的 var chart = new google .visualization.ColumnChart（document.getElementById（'columnchart_material'））; 。它现在工作。
图表就像....

I need to changed the definition of chart here. From var chart = new google.charts.Bar(document.getElementById('columnchart_material')); to the modified one as var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));. It's working now.The chart is like ....

这篇关于Google Material图表柱状图（条形图）自定义列颜色不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！