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

IT技术 javascript charts google-visualization bar-chart
2021-01-18 18:09:51

我已经使用 Google Visualization API 创建了一个 Google 条形图，并且我正在尝试添加一个用于样式的列。这是我在下面使用 .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>

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

1个回答

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

有没有办法让标签与水平材料条一起使用？
2021-04-03 18:09:51
抱歉，哪些标签？你指的是注释吗？如果是这样，不要使用标准图表选项，但您可以尝试添加自己的...
2021-04-04 18:09:51
其它你可能感兴趣的问题
上一篇字段投影中忽略的 batchSize 字段名称 下一篇将 JS 变量传递给 PHP 变量