Question

在Google饼图中，我想更改图例中指示符的颜色以转到下一个结果。这现在是蓝色的，我似乎无法改变它，虽然我可以改变饼切片的颜色（完成）甚至是文本的颜色（不是必需的）。以下是截图：Google pie chart。这是代码：

var options1 = {
          legend: 'none',
          pieSliceText: 'label',
          width: '85%',
          height: '85%',
          chartArea: {'width': '80%', 'height': '80%'},
          legend: {'position': 'bottom'},
          backgroundColor: {fill:'transparent'},
          pieSliceBorderColor: 'transparent',
          colors: ['#41ac89', '#2b9b38', '#b3b300', '#D9C022', '#bab673']
        };

Answer 1

您可以使用以下选项...

text：legend.pagingTextStyle
箭头：legend.scrollArrows

e.g。

legend: {
  position: 'bottom',

  // style paging text and arrows
  pagingTextStyle: {
    color: '#616161'
  },
  scrollArrows:{
    activeColor: '#616161',
    inactiveColor:'#e0e0e0'
  }
},

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['', 'Views'],
    ['dat', 40],
    ['nom', 10],
    ['gen', 10],
    ['hid1', 2],
    ['hid2', 3]
  ]);

  var options = {
    legend: 'none',
    pieSliceText: 'label',
    width: 200,
    height: 200,
    chartArea: {'width': '80%', 'height': '80%'},
    legend: {
      position: 'bottom',

      // style paging text and arrows
      pagingTextStyle: {
        color: '#616161'
      },
      scrollArrows:{
        activeColor: '#616161',
        inactiveColor:'#e0e0e0'
      }
    },
    backgroundColor: {fill: 'transparent'},
    pieSliceBorderColor: 'transparent',
    colors: ['#41ac89', '#2b9b38', '#b3b300', '#D9C022', '#bab673']
  };

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

更改Google饼图下一页指示符的颜色

1 个答案: