谷歌图表 - 条形系列标题不同颜色答案

【问题标题】：Google Chart - Bar Series Title Different Color谷歌图表 - 条形系列标题不同颜色
【发布时间】：2018-03-01 22:27:45
【问题描述】：

我有一个包含 4 个系列的图表（下面的小提琴链接）。目前，它有 Title1、Title2、Title3 和 Title4。我想为每个标题文本名称更改不同的颜色（不是栏）；例如，Title1 为红色，Title2 为蓝色，Title3 为绿色，Title4 为黑色。有没有办法用不同的颜色更改所有这些标题？

https://jsfiddle.net/milacay/e4fe4hsz/21/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Google Chart</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {callback: drawChart, packages: ['corechart']});

function drawChart() {
    var array = [
      ["", "Today", "Goal"],
      ["Title1", 4553, 4151],
      ["Title2", 5560, 6150],
      ["Title3", 850, 920],
      ["Title4", 10505, 12320]
    ];

    var data = new google.visualization.arrayToDataTable(array);
    var formatTooltip = new google.visualization.NumberFormat({
        pattern : '#,##0'
    });
    formatTooltip.format(data, 1);
    formatTooltip.format(data, 2);

    var formatShort = new google.visualization.NumberFormat({
        pattern : 'short'
    });

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
            calc : function (dt, row) {
              return formatShort.formatValue(dt.getValue(row, 1));
            },
            type : "string",
            role : "annotation"
        },
        2, {
            calc : function (dt, row) {
              return formatShort.formatValue(dt.getValue(row, 2));
            },
            type : "string",
            role : "annotation"
        },
    ]);

    var options = {

        chart: {
          title: ' ',
          animation: {
            duration: 2000,
            easing: "out",
            startup: true,
          }
        },
        chartArea: {right:0
                , width: "80%"
                , height: "80%" 
            },
        bar: { 
            groupWidth: 55  // Set the width for each bar
        },
        legend: {position:'top'},
        hAxis: {
                format: 'short',
                //title: 'Month',
                textStyle : { 
                    bold: true,
                    fontSize: 10 // fontsize for the vAxis label.
                    //color: 'darkblue',
                },
            },
        vAxis: {
                format: 'short',
                title: 'Progress To-Date',
                gridlines: { count: 8 } 
            },
        width:320, 
        height:300,
        bars: 'vertical',
        colors: ["lightblue", "lightgray"]

      };
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(view, options);
}

</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>

【问题讨论】：

标签： charts google-visualization

【解决方案1】：

如果要更改轴标签的颜色，
当图表的 'ready' 事件触发时手动更改这些，
请参阅以下工作 sn-p...

google.charts.load('current', {
    callback: drawChart,
    packages: ['corechart']
});

function drawChart() {
    var array = [
      ["", "Today", "Goal"],
      ["Title1", 4553, 4151],
      ["Title2", 5560, 6150],
      ["Title3", 850, 920],
      ["Title4", 10505, 12320]
    ];

    var data = new google.visualization.arrayToDataTable(array);
    var formatTooltip = new google.visualization.NumberFormat({
        pattern : '#,##0'
    });
    formatTooltip.format(data, 1);
    formatTooltip.format(data, 2);

    var formatShort = new google.visualization.NumberFormat({
        pattern : 'short'
    });

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
            calc : function (dt, row) {
              return formatShort.formatValue(dt.getValue(row, 1));
            },
            type : "string",
            role : "annotation"
        },
        2, {
            calc : function (dt, row) {
              return formatShort.formatValue(dt.getValue(row, 2));
            },
            type : "string",
            role : "annotation"
        },
    ]);

    var options = {
        chart: {
          title: ' ',
          animation: {
            duration: 2000,
            easing: "out",
            startup: true,
          }
        },
        chartArea: {right:0
                , width: "80%"
                , height: "80%"
            },
        bar: {
            groupWidth: 55  // Set the width for each bar
        },
        legend: {position:'top'},
        hAxis: {
                format: 'short',
                //title: 'Month',
                textStyle : {
                    bold: true,
                    fontSize: 10 // fontsize for the vAxis label.
                    //color: 'darkblue',
                },
            },
        vAxis: {
                format: 'short',
                title: 'Progress To-Date',
                gridlines: { count: 8 }
            },
        width:320,
        height:300,
        bars: 'vertical',
        colors: ["lightblue", "lightgray"]

      };

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.ColumnChart(container);

    google.visualization.events.addListener(chart, 'ready', function () {
      var colorIndex = 0;
      var colorPallette = ['red', 'blue', 'green', 'black'];
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function (label) {
        if ((label.getAttribute('text-anchor') === 'middle') && (label.getAttribute('fill') !== '#404040')) {
          label.setAttribute('fill', colorPallette[colorIndex]);
          colorIndex++;
        }
      });
    });

    chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

注意：标签颜色 (#404040) 用于区分 x 轴标签和注释标签...

【讨论】：

嗨@WhiteHat，我想更改标题文本颜色，而不是列/栏颜色。我很抱歉没有说清楚。那可能吗？感谢您的回复。
请有机会时去做。非常感谢您提供如此大的帮助。