css - 更改谷歌图表中图例指示器颜色的宽度

Question

我需要使右侧的图例指示器颜色更小(宽度更小)，但我不知道该怎么做。

Answer 1

没有任何选项可以控制图例指示器的宽度
(我能找到的)

而且我不确定您将如何使用 css 完成，
由于用于绘制图表的元素类型相同，
用于绘制图例

但是，您可以使用脚本手动修改，
一旦图表的 'ready' 事件触发

困难的部分是确定要更改的元素

以下是一个选项，
但需要一个连续 x 轴('number')，而不是离散('string')

这将允许您使用图表方法 getXLocation,
查找图表区域之外的元素

请参阅以下工作片段，
指标的宽度减少了一半......

注意:减少颜色指示符的宽度不会移动文本标签
那些也需要手动移动......

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'Geotermia', 'Mareomotriz y Undimotriz'],
    [2015, 100, 200],
    [2020, 110, 215],
    [2025, 130, 225],
    [2030, 140, 230],
    [2035, 160, 250],
    [2040, 180, 260],
    [2045, 190, 276],
    [2050, 195, 300]
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.AreaChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    // get max x coordinate of the chart area
    var browserIsIE = false || !!document.documentMode;
    var chartLayout = chart.getChartLayoutInterface();
    var xRange = data.getColumnRange(0);
    var xMax = chartLayout.getXLocation(xRange.max);
    var reducedWidth = 0;

    // look for non-text elements outside the chart area
    $('#chart_div path, #chart_div rect').each(function (index, element) {
      var bounds;
      var path;
      var pathPoint;
      var xCoord;

      switch ($(element).prop('tagName')) {
        case 'rect':
          // change width
          xCoord = parseFloat($(element).attr('x'));
          if ((xCoord > xMax) && ($(element).attr('fill') !== '#ffffff')) {
            reducedWidth = parseFloat($(element).attr('width')) / 2;
            $(element).attr('width', reducedWidth);
          }
          break;

        case 'path':
          // change path
          bounds = element.getBBox();
          if (bounds.x > xMax) {
            reducedWidth = (bounds.width / 2);
            if (browserIsIE) {
              path = $(element).attr('d').split(' ');
              path[4] = parseFloat(path[1]) + reducedWidth;
              path = path.join(' ');
              $(element).attr('d', path);
            } else {
              path = $(element).attr('d').split(',');
              pathPoint = path[1].split('L');
              path = path[0] + ',' + pathPoint[0] + 'L' + (bounds.x + reducedWidth) + ',' + path[2];
              $(element).attr('d', path);
            }
          }
          break;
      }
    });

    // look for text elements outside the chart area
    $('#chart_div text').each(function (index, element) {
      var bounds;
      var xCoord;

      // change x coord
      bounds = element.getBBox();
      if (bounds.x > xMax) {
        xCoord = parseFloat($(element).attr('x')) - (reducedWidth) + 4;
        $(element).attr('x', xCoord);
      }
    });
  });

  chart.draw(data, {
    chartArea: {
      bottom: 48,
      height: '100%',
      left: 48,
      right: 200,
      top: 24,
      width: '100%'
    },
    hAxis: {
      format: '0000',
      ticks: [
        2015,
        2020,
        2025,
        2030,
        2035,
        2040,
        2045,
        2050
      ]
    },
    height: '100%',
    isStacked: true,
    title: 'TWh',
    width: '100%'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>