javascript - Google 图表 - 更改 'more' 链接的颜色

Question

我制作了几个图表(饼图和条形图)，由于空间限制，需要重新调整它们的大小，导致图例部分添加了“1/2 ▼”。

我在这里添加了我的代码:http://codepen.io/qtx/pen/EtHvi如果我的问题没有正确显示，这里是我网站的屏幕截图，/image/C45fQ.png在我想要改变的地方画一个圆圈。(如果我超过 8 列，它也会显示在条形图中，如上面的示例所示)

所以我的问题是，有什么方法可以改变该文本/链接的颜色吗？我似乎无法在网上或 api 文档中找到任何内容。

任何帮助将不胜感激。

    <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>

感谢您的宝贵时间。

Answer 1

您可以使用legend.scrollArrows.activeColor和legend.scrollArrows.inactiveColor来设置这些。 legend.pagingTextStyle.color 也可用。

在你的情况下，它会是这样的:

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
};