Javascript 颜色变化-谷歌柱形图材质_Javascript_Google Visualization

Javascript 颜色变化-谷歌柱形图材质

javascript google-visualization

Javascript 颜色变化-谷歌柱形图材质,javascript,google-visualization,Javascript,Google Visualization,我试图在我的网站上使用谷歌图表“columnchart_material”。图表显示正确，但我无法更改条形图的颜色。我想第一个酒吧是在一个特定的颜色和第二个酒吧在另一个这是我的密码。我希望你能帮我找出问题所在。谢谢你的帮助 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"&

我试图在我的网站上使用谷歌图表“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>


load（'current'，{'packages'：['bar']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['''Ville'，{role:'style'}，'department'，{role:'style'}，
['TAXED'居住区'，22，'颜色：#A63950'，24，'颜色：#39A68F'，]，
[“巴蒂河畔税收基金会”，24，“颜色：#A63950”，21，“颜色：#39A68F'，”，
['Taxe foncière non-bati'，36，'颜色：#A63950'，18，'颜色：#39A68F'，]
]);
变量选项={
图表：{
标题：“公共税”，
}
};
var chart=new google.charts.Bar（document.getElementById（'columnchart_material'）；
图表绘制（数据、选项）；
}

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

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

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

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

在文档页面中，有一个关于

系列

选项的提示。在这里，您可以定义您喜爱的颜色/颜色：

首先，删除

var数据中的{role:'style'}
参数，然后在var选项中添加series
参数：
<!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>


我喜欢的颜色
//加载可视化API和corechart包。
load（“当前”{packages:['bar']}）；
//将回调设置为在加载Google Visualization API时运行。
google.charts.setOnLoadCallback（drawChart）；
//创建并填充数据表的回调，
//实例化饼图，传入数据并
//画它。
函数绘图图（）{
//创建数据表。
var data=google.visualization.arrayToDataTable([
[“‘维尔’、‘部门’”，
[22,24]对居住区征税，
['Taxe foncière sur le bati'，24,21]，
['Taxe foncière non-bati'，36、18]
]);
//设置图表选项
变量选项={
标题：“公共税”，
isStacked:错，
系列：{
0:{color:'blue'，visibleInLegend:true}，
1:{color:'lightgreen'，visibleInLegend:true}
},
图例：“底部”
};
//实例化并绘制图表，传入一些选项。
var chart=new google.charts.Bar（document.getElementById（'columnchart_material'）；
绘制（数据，google.charts.Bar.convertOptions（选项））；
}

这将提供如下图表颜色：
在文档页面中，有一个关于系列
选项的提示。在这里，您可以定义您喜爱的颜色/颜色：
首先，删除var数据中的{role:'style'}
参数，然后在var选项中添加series
参数：
<!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>


我喜欢的颜色
//加载可视化API和corechart包。
load（“当前”{packages:['bar']}）；
//将回调设置为在加载Google Visualization API时运行。
google.charts.setOnLoadCallback（drawChart）；
//创建并填充数据表的回调，
//实例化饼图，传入数据并
//画它。
函数绘图图（）{
//创建数据表。
var data=google.visualization.arrayToDataTable([
[“‘维尔’、‘部门’”，
[22,24]对居住区征税，
['Taxe foncière sur le bati'，24,21]，
['Taxe foncière non-bati'，36、18]
]);
//设置图表选项
变量选项={
标题：“公共税”，
isStacked:错，
系列：{
0:{color:'blue'，visibleInLegend:true}，
1:{color:'lightgreen'，visibleInLegend:true}
},
图例：“底部”
};
//实例化并绘制图表，传入一些选项。
var chart=new google.charts.Bar（document.getElementById（'columnchart_material'）；
绘制（数据，google.charts.Bar.convertOptions（选项））；
}

这将提供如下图表颜色：
请参阅使用物料图表或核心图表的选项…请参阅使用物料图表或核心图表的选项…这也适用于选项：{colors:['blue'，'lightgreen']
这也适用于选项：{colors:['blue'，'lightgreen']