Google柱状图-设置选定的柱状图颜色

Question

我有一个简单的柱状图，我需要改变选中(点击)的列的颜色。默认情况下，它会在列周围添加白线。

var options = {
    title: 'Motivation and Energy Level Throughout the Day',
    hAxis: {
      title: 'Time of Day',
      format: 'h:mm a',
      viewWindow: {
        min: [7, 30, 0],
        max: [17, 30, 0]
      }
    },
    vAxis: {
      title: 'Rating (scale of 1-10)'
    }
  };

下面是jSFiddle上的简单示例

那么，如果我单击任何列，如何将其颜色更改为黑色？我不能用材料图表。

谢谢

Answer 1

最后我找到了答案here

坦率地说，我认为还有更简单的选项，比如设置配置选项，例如hAxis.selected.color：'#000000‘。

var chart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
        // setting the "isStacked" option to true fixes the spacing problem
        isStacked: true,
        height: 300,
        width: 600,
        series: {
            1: {
                // set the color to change to
                color: '00A0D0',
                // don't show this in the legend
                visibleInLegend: false
            }
        }
    }
});

google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getChart().getSelection();
    if (selection.length > 0) {
        var newSelection = [];
        // if row is undefined, we selected the entire series
        // otherwise, just a single element
        if (typeof(selection[0].row) == 'undefined') {
            newSelection.push({
                column: 2
            });
            chart.setView({
                columns: [0, {
                    type: 'number',
                    label: data.getColumnLabel(1),
                    calc: function () {
                        // this series is just a placeholder
                        return 0;
                    }
                }, 1]
            });
        }
        else {
            var rows = [];
            for (var i = 0; i < selection.length; i++) {
                rows.push(selection[i].row);
                // move the selected elements to column 2
                newSelection.push({
                    row: selection[i].row,
                    column: 2
                });
            }

            // set the view to remove the selected elements from the first series and add them to the second series
            chart.setView({
                columns: [0, {
                    type: 'number',
                    label: data.getColumnLabel(1),
                    calc: function (dt, row) {
                        return (rows.indexOf(row) >= 0) ? null : {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)};
                    }
                }, {
                    type: 'number',
                    label: data.getColumnLabel(1),
                    calc: function (dt, row) {
                        return (rows.indexOf(row) >= 0) ? {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)} : null;
                    }
                }]
            });
        }
        // re-set the selection when the chart is done drawing
        var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
            google.visualization.events.removeListener(runOnce);
            chart.getChart().setSelection(newSelection);
        });
    }
    else {
        // if nothing is selected, clear the view to draw the base chart
        chart.setView();
    }
    chart.draw();
});

chart.draw();

}

更新:上面的解决方案只有在你使用ChartWrapper的时候才有效。实际上，我只需要针对图表的解决方案。最后，我通过向数据行添加style.color解决了这个问题。如果我选择的索引= rowIndex，那么我会更改颜色。简单，工作起来就像一个护身符。我希望它能帮助其他人。

    var data = new google.visualization.DataTable();
    data.addColumn({ id: 'name', type: 'string' });
    data.addColumn({ id: 'm1', type: 'number' });
    data.addColumn({type: 'string', role:'tooltip', 'p': {'html': true}});
    data.addColumn({type: 'string', role:'style'});
    $.each(scatterData.data, function (index, value) {
        if (index == chartSelectedIndex) {
            data.addRow([ {v:value.park}, {v:value.m1}, {v:getColumnChartHTMLTooltip(value.park,value.name,value.m1)}, 'color: #32CCFF' ]);
        } else{
            data.addRow([ {v:value.park}, {v:value.m1}, {v:getColumnChartHTMLTooltip(value.park,value.name,value.m1)}, null ]);
        };
    });

Answer 2

这对我很有效

.my-div svg>g>g>g>g>rect { fill: #79baeb; }