Question

我正在尝试在我的网站中使用谷歌图表“columnchart_material”。图表显示正常但我无法更改条形图的颜色。我希望第一个条形图为特定颜色，第二个条形图形条形图另一个条形图。

这是我的代码。我希望你能帮我找到错误。谢谢你的帮助。

<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.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['', 'Ville', {role: 'style'}, 'Departement', {role: 'style'} ],
      ['Taxe d\'habitation',22, 'color: #A63950', 24, 'color: #39A68F', ],
      ['Taxe foncière sur le bati',24,  'color: #A63950', 21,  'color: #39A68F',],
      ['Taxe foncière non-bati', 36,  'color: #A63950', 18, 'color: #39A68F',]
    ]);

    var options = {
      chart: {
        title: 'Taxes communales',
      }

    };




    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(data, options);
  }
</script>
<div id="columnchart_material"></div>

Answer 1

我发现您的代码没有任何问题，只需确保您已正确加载模块，

 var chart = new google.charts.Bar(document.getElementById('columnchart_material'));  
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }

DEMO

Answer 2

在文档页面中，存在series个选项的提示。在那里，您可以定义自己喜欢的颜色/颜色：https://developers.google.com/chart/interactive/docs/gallery/columnchart#configuration-options

首先，删除{role: 'style'}中的var data参数，然后在series中添加var options参数：

<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <title>Colours I like</title>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the corechart package.
      google.charts.load("current", {packages:['bar']});


      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = google.visualization.arrayToDataTable([
          ['', 'Ville', 'Departement'],
          ['Taxe d\'habitation', 22, 24],
          ['Taxe foncière sur le bati', 24, 21],
          ['Taxe foncière non-bati', 36, 18]
        ]);


        // Set chart options
        var options = {
          title: 'Taxes communales',
          isStacked: false,
          series: { 
              0:{color: 'blue', visibleInLegend: true},
              1:{color: 'lightgreen', visibleInLegend: true}
              },
          legend: 'bottom'
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

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

      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="columnchart_material" style="width: 400px; height: 300px;"></div>

  </body>
</html>

这将提供如下图表颜色：

颜色变化 - 谷歌柱形图材料

2 个答案: