如何更改 Google 图表中选定的列边框颜色和宽度？

Question

我正在使用谷歌图表。我想更改所选列的边框颜色和宽度。默认笔触颜色为白色，宽度为 1。我想将边框颜色更改为黑色，将宽度更改为 2。

代码 ：

var data = google.visualization.arrayToDataTable(mydata);
var options = {
                    width: 600,
                    height: 400,
                    legend: {position: 'top', maxLines: 4},
                    bar: {groupWidth: '50%'},
                    isStacked: true
                    };
var chart = new google.visualization.ColumnChart(document.getElementById('mydiv'));
chart.draw(data, options);

Answer 1

没有设置此样式的内置选项，但您可以通过 CSS 覆盖这些笔画颜色/宽度的设置：

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawStacked);

function drawStacked() {
      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Motivation Level');
      data.addColumn('number', 'Energy Level');

      data.addRows([
        [{v: [8, 0, 0], f: '8 am'}, 1, .25],
        [{v: [9, 0, 0], f: '9 am'}, 2, .5],
        [{v: [10, 0, 0], f:'10 am'}, 3, 1],
        [{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
        [{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
        [{v: [13, 0, 0], f: '1 pm'}, 6, 3],
        [{v: [14, 0, 0], f: '2 pm'}, 7, 4],
        [{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
        [{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
        [{v: [17, 0, 0], f: '5 pm'}, 10, 10],
      ]);

      var options = {
                    legend: {position: 'top', maxLines: 4},
                    
                    isStacked: true};

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

#mydiv svg>g>g>g>g>rect[stroke="#ffffff"][stroke-width="1"] {
  stroke: black !important;
  stroke-width: 2px !important;
}

<div id="mydiv"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>