Google图表-更改“更多”链接的颜色

Question

I've made a couple of charts (pie and bar) and due to space limitations they needed to be re-sized which resulted in the addition of a "1/2 ▼" for the legend part.

I added my code here: http://codepen.io/qtx/pen/EtHvi And in case my problem doesn't show up correctly here is a screenshot from my site, http://i.imgur.com/YJbm6jK.png with a circle around what I want to change. (it also shows up in the bar chart if I go beyond 8 columns, like in the above example)

So my question, is there any way I can change the color of that text/link? I can't seem to find anything online or in the api docs.

Any help would be greatly appreciated.

    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Set 1', 215],
        ['Set 2', 83],
        ['Set 3', 132],
        ['Set 4', 72],
        ['Set 5', 260],
        ['Set 6', 34],
        ['Set 7', 9],
        ['Set 8', 24]
        ]);
        // Create the data table.
        var data2 = new google.visualization.arrayToDataTable([
        ['Genre', 'Set 1', 'Set 2', 'Set 3', 'Set 4', 'Set 5', 'Set 6', 'Set 7','Set 8',{ role: 'annotation' } ],
        ['18/7', 0, 0, 0, 0, 0, 0, 0, 2, ''],
        ['23/7', 0, 0, 0, 0, 0, 0, 0, 1, ''],
        ['24/7', 0, 0, 0, 0, 0, 0, 0, 4, ''],
        ['26/7', 0, 0, 0, 0, 0, 0, 0, 4, ''],
        ['29/7', 0, 0, 0, 0, 260, 0, 0, 0, ''],
        ['31/7', 0, 0, 0, 0, 0, 0, 0, 1, ''],
        ['2/8', 0, 0, 0, 0, 0, 0, 9, 0, ''],
        ['3/8', 0, 0, 132, 0, 0, 0, 0, 0, ''],
        ['4/8', 0, 0, 0, 0, 0, 0, 0, 11, ''],
        ['8/8', 0, 0, 0, 0, 0, 0, 0, 0, ''],
        ['13/8', 0, 83, 0, 0, 0, 0, 0, 0, ''],
        ['14/8', 215, 0, 0, 0, 0, 0, 0, 0, ''],
        ['15/8', 0, 0, 0, 72, 0, 0, 0, 0, ''],
        ['16/8', 0, 0, 0, 0, 0, 34, 0, 0, ''],
        ]);

        // Set chart options
        var options = {
        title: '% of photos', fontSize: '12', backgroundColor: "transparent",
        colors: ['#F56363', '#eda15f', '#40C1A0', '#FFD586', '#81CFE0', '#fcfcfc', '#A06C90', '#FFCAD1'],
        };
        // Set chart options
        var options2 = {
        title: '# of photos', backgroundColor: "transparent",
        colors: ['#F56363', '#eda15f', '#40C1A0', '#FFD586', '#81CFE0', '#fcfcfc', '#A06C90', '#FFCAD1'],
        legend: { position: 'bottom', maxLines: 3 },
        bar: { groupWidth: '99%' },
        isStacked: true,
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
        var chart2 = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
        chart2.draw(data2, options2);

      }
    </script>

Thank you for your time.

Answer 1

While there's probably a way to do it programmatically, you can target the element with CSS:

<style>
    path[d="M811,150L823,150L817,162Z"] {fill: purple;}

or simply

    path[d^="M811"] {fill: purple;}
</style>

Answer 2

You can use legend.scrollArrows.activeColor and legend.scrollArrows.inactiveColor to set these. legend.pagingTextStyle.color is also available.

In your case it would be something like:

var options2 = {
        title: '# of photos', backgroundColor: "transparent",
        colors: ['#F56363', '#eda15f', '#40C1A0', '#FFD586', '#81CFE0', '#fcfcfc', '#A06C90', '#FFCAD1'],
        legend: { position: 'bottom', maxLines: 3, scrollArrows: { inactiveColor: "red", activeColor: "red" } },
        bar: { groupWidth: '99%' },
        isStacked: true
};