谷歌图表 - 酒吧系列标题不同的颜色

问题描述 投票：1回答：1

我有一个图表有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个回答
2
投票

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

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轴标签和注释标签......

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.