Google Material Chart柱形图（条形图）自定义列颜色不起作用

debugcn 发表于 Dev

阿维舍克

我想绘制一个简单的柱形图中HTML-JavaScript使用google chart.I已经使用Google materiel chart CDN绘制柱形图具有4行与4种不同颜色。

我尝试了很多选择，但没有任何工作正常。当我使用colors: ['#b0120a', '#004411', '#ffab91', '#004411']过时，所有4列中仅显示第一种颜色。我也尝试过，{role:'style'}但仍然无法正常工作。

<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>

图表如下：

但是我想要4种颜色的4列。提前致谢。

阿维舍克

Yaa，最后我正确地做到了这一点，而我确实想成为。如果需要的话，请参见下面的代码。

<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>

我需要更改chart此处的定义。从var chart = new google.charts.Bar(document.getElementById('columnchart_material'));到修改的为var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));。现在正在工作。图表就像....

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-27

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章