Question

我使用Google Visualization API创建了一个谷歌条形图，我试图添加一个将用于样式的列。这是我在下面的实现，使用.addcolumn（），然后将颜色字段添加到每一行，但每个条仍然是默认的蓝色。

<script type="text/javascript">
// Runs onload to build the first default chart and load the bar chart package
var jsonCoachCount;
window.onload = function(){
    jsonCoachCount = JSON.parse('[{"Service_Count":"4","Name":"Other"},  {"Service_Count":"4","Name":"Campus Network"},{"Service_Count":"3","Name":"Learn@UW"},{"Service_Count":"2","Name":"Customer Service"},{"Service_Count":"1","Name":"Blackboard Collaborate"},{"Service_Count":"1","Name":"Office 365"},{"Service_Count":"1","Name":"Multiple"},{"Service_Count":"1","Name":"Office-ionado"},{"Service_Count":"1","Name":"Case Notes"},{"Service_Count":"1","Name":"ResNet"}]');

// Load the Visualization API and the barchart package.
    google.charts.load('current', {'packages': ['bar']});
// Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

};
function drawChart(){

    var servicesData = new google.visualization.DataTable();

    servicesData.addColumn('string', 'Service');
    servicesData.addColumn('number', 'Number of Coaches');
    servicesData.addColumn({type:'string', role:'style'});

    for(i = 0; i < jsonCoachCount.length; i++){
        tempArray =[];
        tempArray.push(String (jsonCoachCount[i]['Name']),
                parseInt(jsonCoachCount[i]['Service_Count']),
                'color:Red');
        servicesData.addRow(tempArray);
    }

    var options = {
        backgroundColor: {
            fill: '#E8E4D8'
        },
        legend: { position: 'none' },
        titleTextStyle:{
            bold: 'true'
        },
        chart: {
            title: 'Coaches by Service',
            subtitle: 'Coaches by Services: From 2016-09-10 until Today'
        },
        bar: {
            groupWidth: '60%'
        },
        'hAxis': {
            textStyle: {
                fontSize: 11
            }
        }
    };

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

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

}
<html>

<head>
<script type="text/javascript"     src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>

</body>

</html>

我不确定我哪里出错了，或者我是否误解了一段文档。我非常感谢帮助改变条形图上条形的颜色，谢谢！

Answer 1

colors选项中的每种颜色都应用于数据表中的每个系列/ y轴列如果只有一个y轴列，则只应用一种颜色。

否则，Style Column Role是为单个条形图着色的最简单方法但是，它不适用于材料图表。

有关选项，请参阅示例图表...

图表1 =材料图表
  图2 =核心图表
  两者都以相同的方式构建各种样式设置
  适用于核心，而非物质

如果您对每个酒吧颜色相同都没问题......

图3 =材料表
  使用colors配置选项将颜色更改为红色
  只存在一个系列，因此只接受一种颜色

如果每个条形图必须具有单独颜色的材质图表...

图4 =材料表
  每个值都作为列而不是行添加，从而创建多个系列
  使用colors配置选项更改每个条的颜色
  此处也可以使用series选项   但是，更难以使用，请注意Spacer列和缺少hAxis标签......

google.charts.load('current', {
  callback: init,
  packages: ['bar', 'corechart']
});

function init() {
  var jsonCoachCount = JSON.parse('[{"Service_Count":"4","Name":"Other"},  {"Service_Count":"4","Name":"Campus Network"},{"Service_Count":"3","Name":"Learn@UW"},{"Service_Count":"2","Name":"Customer Service"},{"Service_Count":"1","Name":"Blackboard Collaborate"},{"Service_Count":"1","Name":"Office 365"},{"Service_Count":"1","Name":"Multiple"},{"Service_Count":"1","Name":"Office-ionado"},{"Service_Count":"1","Name":"Case Notes"},{"Service_Count":"1","Name":"ResNet"}]');

  var options = {
      backgroundColor: {
          fill: '#E8E4D8'
      },
      legend: { position: 'none' },
      titleTextStyle:{
          bold: 'true'
      },
      chart: {
          title: 'Coaches by Service',
          subtitle: 'Coaches by Services: From 2016-09-10 until Today'
      },
      bar: {
          groupWidth: '60%'
      },
      hAxis: {
          textStyle: {
              fontSize: 11
          }
      }
  };

  drawChart();
  drawSeriesChart();

  function drawChart() {
      var servicesData = new google.visualization.DataTable();

      servicesData.addColumn('string', 'Service');
      servicesData.addColumn('number', 'Number of Coaches');
      servicesData.addColumn({type:'string', role:'style'});

      for (i = 0; i < jsonCoachCount.length; i++) {
          var tempArray =[];
          var tempColor;
          switch (i) {
            case 0:
              tempColor = 'color:Red';
              break;

            case 1:
              tempColor = 'orange';
              break;

            case 2:
              tempColor = 'fill-color: gold;';
              break;

            case 3:
              tempColor = 'bar {color: green;}';
              break;

            case 4:
              tempColor = 'bar {fill-color: blue;}';
              break;

            default:
              tempColor = 'bar {fill-color: cyan; stroke-color: black; stroke-width: 4;}';
          }
          tempArray.push(
            String (jsonCoachCount[i]['Name']),
            parseInt(jsonCoachCount[i]['Service_Count']),
            tempColor
          );
          servicesData.addRow(tempArray);
      }

      var chart = new google.charts.Bar(document.getElementById('servicesChart1'));
      chart.draw(servicesData, google.charts.Bar.convertOptions(options));

      var chart = new google.visualization.ColumnChart(document.getElementById('servicesChart2'));
      chart.draw(servicesData, options);

      // only one series exists -- only one color will work
      options.colors = ['red'];
      var chart = new google.charts.Bar(document.getElementById('servicesChart3'));
      chart.draw(servicesData, google.charts.Bar.convertOptions(options));
  }

  function drawSeriesChart() {
      var servicesData = new google.visualization.DataTable();

      servicesData.addColumn('string', 'Service');
      for (i = 0; i < jsonCoachCount.length; i++) {
        servicesData.addColumn('number', String (jsonCoachCount[i]['Name']));
        servicesData.addColumn('number', 'Spacer');
      }

      var tempArray = [];
      tempArray.push('Number of Coaches');
      for (i = 0; i < jsonCoachCount.length; i++) {
        tempArray.push(parseInt(jsonCoachCount[i]['Service_Count']));
        tempArray.push(null);
      }
      servicesData.addRow(tempArray);

      options.colors = [
        'deeppink',
        'red',
        'orange',
        'gold',
        'green',
        'blue',
        'indigo',
        'purple',
        'violet',
        'pink'
      ];

      var chart = new google.charts.Bar(document.getElementById('servicesChart4'));
      chart.draw(servicesData, google.charts.Bar.convertOptions(options));
  }
}

div {
  padding: 2px 0px 2px 0px;
  font-weight: bold;
}

.code {
  background-color: lightgray;
  font-family: Courier New;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>1. Material Chart</div>
<div id="servicesChart1"></div>
<div>2. Core Chart</div>
<div id="servicesChart2"></div>
<div>3. Material Chart with <span class="code">colors: ['red']</span></div>
<div id="servicesChart3"></div>
<div>4. Multi-Series Material Chart</div>
<div id="servicesChart4"></div>

Google条形图无法更改单个条形图颜色

1 个答案: