javascript - 如何防止图例被 chop GOOGLE CHARTS

Question

google.charts.load('current', {'packages': ['line']});
google.charts.setOnLoadCallback(drawCurveTypes);


function drawCurveTypes() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'values');
      data.addColumn('number', 'a');
      data.addColumn('number', 'b');
      data.addColumn('number', 'c');
      data.addColumn('number', 'd');
			data.addColumn('number', 'e');
      data.addColumn('number', 'f');
      data.addColumn('number', 'g');
      data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);

		  var options = {
        chart: {
          title: "Example"
          }
     };
      var line=document.getElementById('chart_div');
      var chart = new google.charts.Line(line);
      chart.draw(data,google.charts.Line.convertOptions(options));
    }

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

这是我的图表。这是一个 Material 折线图(包:google.charts.Line 不是 google.visualization.LineChart)。如您所见，“SPPlus”已被切断。我试图调整图表的高度，但这并没有解决我的问题。

Answer 1

您可以增加图表的高度。
这在提供的代码段中可能不起作用的原因，
这些选项被用在了错误的地方。

在代码片段中，选项被添加到图表的构造函数中。
因此，没有使用任何提供的选项，包括标题。

var chart = new google.charts.Line(line,google.charts.Line.convertOptions(options));
chart.draw(data);

相反，它们应该被添加到 draw 方法中。

var chart = new google.charts.Line(line);
chart.draw(data, google.charts.Line.convertOptions(options));

您还可以减小字体大小。
请参阅以下工作片段...

google.charts.load('current', {'packages': ['line']});
google.charts.setOnLoadCallback(drawCurveTypes);

function drawCurveTypes() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'values');
  data.addColumn('number', 'a');
  data.addColumn('number', 'b');
  data.addColumn('number', 'c');
  data.addColumn('number', 'd');
  data.addColumn('number', 'e');
  data.addColumn('number', 'f');
  data.addColumn('number', 'g');
  data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);

  var options = {
    chart: {
      title: 'Example'
    },
    height: 400,
    legend: {
      textStyle: {
        fontSize: 10
      }
    }
  };
  var line = document.getElementById('chart_div');
  var chart = new google.charts.Line(line);
  chart.draw(data, google.charts.Line.convertOptions(options));
}

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

---

另一种选择是绘制您自己的自定义图例，
在图表的顶部，这将留出更多空间，
不增加高度。
请参阅以下工作片段...

google.charts.load('current', {'packages': ['line']});
google.charts.setOnLoadCallback(drawCurveTypes);

function drawCurveTypes() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'values');
  data.addColumn('number', 'a');
  data.addColumn('number', 'b');
  data.addColumn('number', 'c');
  data.addColumn('number', 'd');
  data.addColumn('number', 'e');
  data.addColumn('number', 'f');
  data.addColumn('number', 'g');
  data.addRows([[3,4,5,10,11,12,13,12], [6,7,8,10,11,12,13,12],[9,10,11,10,11,12,13,12]]);

  var options = {
    chart: {
      title: 'Example'
    },
    legend: {
      position: 'none'
    }
  };
  var line = document.getElementById('chart_div');
  var chart = new google.charts.Line(line);

  // 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 lines = line.getElementsByTagName('path');
    Array.prototype.forEach.call(lines, function(path) {
      if (colorPallette.indexOf(path.getAttribute('stroke')) === -1) {
        colorPallette.push(path.getAttribute('stroke'));
      }
    });

    // 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;
        marker = marker.closest('.legend-marker');
        var columnIndex = parseInt(marker.getAttribute('data-columnIndex'));
        chart.setSelection([{column: columnIndex}]);
      }, false);
      marker.addEventListener('mouseout', function (e) {
        chart.setSelection([]);
      }, false);
    });
  });

  chart.draw(data, google.charts.Line.convertOptions(options));
}

#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="chart_div"></div>
<div id="legend_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>