Googleのグラフの凡例のインジケータの色の幅を変更します

Question

右側に凡例のインジケータの色を小さくする必要がありますが、可能な場合はどうすればいいのか分かりません。

Answer 1

は伝説の指標
（私は見つけることができること）

の幅を制御するための任意のオプションがないと私は、あなたがCSSで実現する方法をわからない
同じ要素タイプは、グラフを描画するために使用するので、
は、

は、あなたが、しかし、スクリプトを使用して手動で変更することができ凡例を描画するために使用されている
チャートの'ready'イベントが発生回

難しい部分は、以下

を変更するためにどの要素を識別しているが（一つの選択肢、
あるが、連続 x軸（'number'）を必要とする、対離散'string'）

これにより、チャートメソッドgetXLocation,
を使用してチャート外の要素を見つけることができますエリア

作業スニペット以下を参照してください、
指標の幅が半減する...

ノート：色指標の幅を小さくテキストを移動しません
にラベルを付けたものは、する必要があります手動で私は本当にあなたの答えを好むが、私は何かがBAだと思う...だけでなく

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>