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

Question

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

cha*_*hak 2 javascript charts google-visualization bar-chart

我使用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>

Run Code Online (Sandbox Code Playgroud)

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

我不知道我哪里出错了,或者我误解了一份文件.我很感激帮助改变条形图上的条形颜色,谢谢!

Answer 1

Whi*_*Hat 6

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

否则,样式列角色是为单个条形图着色的最简单方法.
但是,它不适用于材料图表.

有关选项,请参见示例图表...

图表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));
  }
}

Run Code Online (Sandbox Code Playgroud)

div {
  padding: 2px 0px 2px 0px;
  font-weight: bold;
}

.code {
  background-color: lightgray;
  font-family: Courier New;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，8 月前
查看次数：	1334 次
最近记录：	7 年，1 月前