谷歌图表图例位置顶部不工作

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Nescafe Instant');
  data.addColumn('number', 'Folgers Instant');
  data.addColumn('number', 'Nescafe Beans');
  data.addColumn('number', 'Folgers Beans');
  data.addRows([
    ['2001', 500, 1200, 816, 200],
    ['2002', 163, 231, 539, 594],
    ['2003', 125, 819, 200, 578],
    ['2004', 197, 536, 613, 500]
  ]);

  var options = {
    chart: {
      title: 'coffee consumption',
      subtitle: 'This data is not real'
    },
    height: '100%',
    isStacked: true,
    legend: {
      position: 'none'
    },
    series: {
      2: {
        targetAxisIndex: 1
      },
      3: {
        targetAxisIndex: 1
      }
    },
    width: '100%'
  };

  var container = document.getElementById('chart_div');
  var chart = new google.charts.Bar(container);

  drawChart();
  window.addEventListener('resize', drawChart, false);
  function drawChart() {
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }

  // add legend marker
  function addLegendMarker(markerProps) {
    var legendMarker = document.getElementById('template-legend-marker').innerHTML;
    for (var handle in markerProps) {
      if (markerProps.hasOwnProperty(handle)) {
        legendMarker = legendMarker.replace('{{' + handle + '}}', markerProps[handle]);
      }
    }
    document.getElementById('legend_div').insertAdjacentHTML('beforeEnd', legendMarker);
  }

  // chart ready event
  google.visualization.events.addListener(chart, 'ready', function () {
    var legend = document.getElementById('legend_div');

    // get colors from chart
    var colorPallette = [];
    var colorsBottom = [];
    var colorsTop = [];
    var stacks = container.getElementsByTagName('*');
    Array.prototype.forEach.call(stacks, function(stack) {
      switch (stack.tagName) {
        case 'path':
          if ((stack.getAttribute('fill') !== null) && (stack.getAttribute('fill') !== '#ffffff')) {
            if (colorsTop.indexOf(stack.getAttribute('fill')) === -1) {
              colorsTop.push(stack.getAttribute('fill'));
            }
          }
          break;

        case 'rect':
          if ((stack.getAttribute('fill') !== null) && (stack.getAttribute('fill') !== '#ffffff')) {
            if (colorsBottom.indexOf(stack.getAttribute('fill')) === -1) {
              colorsBottom.push(stack.getAttribute('fill'));
            }
          }
          break;
      }
    });
    for (var i = 0; i < colorsBottom.length; i++) {
      colorPallette.push(colorsBottom[i]);
      colorPallette.push(colorsTop[i]);
    }

    // clear previous legend
    legend.innerHTML = '';

    // add legend marker for each Y axis column - skip X axis --> i = 1
    for (var i = 1; i < data.getNumberOfColumns(); i++) {
      var markerProps = {};
      markerProps.index = i;
      markerProps.color = colorPallette[i - 1];
      markerProps.label = data.getColumnLabel(i);
      addLegendMarker(markerProps);
    }

    // add "hover" event to each legend marker
    var currentSelection;
    var markers = legend.getElementsByTagName('DIV');
    Array.prototype.forEach.call(markers, function(marker) {
      marker.addEventListener('mouseover', function (e) {
        currentSelection = chart.getSelection();
        var marker = e.target || e.srcElement;
        if (marker.tagName.toUpperCase() !== 'DIV') {
          marker = marker.parentNode;
        }
        var columnIndex = parseInt(marker.getAttribute('data-columnIndex'));
        chart.setSelection([{column: columnIndex}]);
      }, false);
      marker.addEventListener('mouseout', function (e) {
        chart.setSelection([]);
      }, false);
    });
  });
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

#legend_div {
  color: #999;
  font-family: Roboto;
  position: absolute;
  right: 0px;
  text-align: right;
  top: 0px;
  width: 60%;
  z-index: 1000;
}

.legend-marker {
  display: inline-block;
  padding: 6px 6px 6px 6px;
}

.legend-marker-color {
  border-radius: 25%;
  display: inline-block;
  height: 12px;
  width: 12px;
}

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

<!-- template for building marker -->
<script id="template-legend-marker" type="text/html">
  <div class="legend-marker" data-columnIndex="{{index}}">
    <div class="legend-marker-color" style="background-color: {{color}}"></div>
    <span>{{label}}</span>
  </div>
</script>