更改谷歌图表中图例指标颜色的宽度 [英] Change width of legend indicator color in google chart

问题描述

我需要在右侧制作较小（较少宽度）的图例指示颜色，但我不知道如果可能的话。>

解决方案

没有任何选项可以控制图例指标的宽度

（我可以找到）

我不知道如何完成css，

，因为用于绘制图表的元素类型相同，

用于绘制图例

但是，您可以使用脚本手动修改

，一旦图表的'ready'事件触发

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

以下是一个选项，

但需要一个连续的 x轴（'number'） ，与离散（'字符串'）

这将允许您使用图表方法 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]，[ [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（）{//获取图表区域的最大x坐标var browserIsIE = false || !! document.documentMode; var chartLayout = chart.getChartLayoutInterface（）; var xRange = data.getColumnRange（0）; var xMax = chartLayout.getXLocation（xRange.max）; var reducedWidth = 0; //在图表区域外寻找非文本元素$（'＃chart_div path，#chart_div rect'） .each（function（index，element）{var bounds; var path; var pathPoint; var xCoord; switch（$（element）.prop（'tagName'））{case'rect'：//改变宽度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; }}）; //查找图表区域之外的文本元素$（'＃chart_div text'）。each（function（index，element）{var bounds; var xCoord; //更改x coord bounds = element.getBBox（）; if （元素）.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'，蜱：[2015,2020,2025,2030,2035,2040,2045,2050]}，高度：'100％'，isStacked：true，标题：'TWh'，宽度：'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>

b

I need to make smaller (less width) the legend indicator color at right side but i dont know how if it's possible.

解决方案

there aren't any options to control the width of the legend indicators
(that I can find)

and I'm not sure how you would accomplish with css,
since the same element types used to draw the chart,
are used to draw the legend

you can, however, modify manually with script,
once the chart's 'ready' event fires

the hard part is identifying which elements to change

following is one option,
but requires a continuous x-axis ('number'), vs. discrete ('string')

this would allow you to use chart method getXLocation,
to find elements outside of the chart area

see following working snippet,
the width of the indicators is reduced by half...

note: reducing the width of the color indicators will not move the text labels
those will need to be manually moved as well...

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>

这篇关于更改谷歌图表中图例指标颜色的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！