Replace a showR2 with a custom text in a Google Chart?

问题

I am playing around with Google Chart to look a certain way. In this situation I have a combo chart a line and column chart.

I have stumble upon a view "layout" problems

How do replace the show2r legend with just some custom text? At the moment says: y = 2.032E-4 * x - 8.203 r^2 = 7.005E-3 and I want to replace it with "Trendline (Lineair) 2/ Also the legend gets a 1/2 and Arrows left and right. I like the legend to always be visible? 3/ The x axis doesn't display all dates, how can I set that as a default? 4/ How do I add vertical line in say month June??

Regards

回答1:

to change the trendline label in the legend, use option --> labelInLegend

there are no standard options to change the value in the tooltip,
but it can be changed manually using event --> onmouseover

when the legend's position is top,
you can use option --> legend.maxLines
to increase the number of lines available and prevent the arrows...

to ensure all dates are shown on the x-axis,
allow enough room by using option --> chartArea.bottom

see following working snippet for examples of each...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1'],
    [new Date(2017, 11, 28), 175, 10],
    [new Date(2017, 11, 29), 159, 20],
    [new Date(2017, 11, 30), 126, 35],
    [new Date(2017, 11, 31), 129, 40],
    [new Date(2018, 0, 1), 108, 60],
    [new Date(2018, 0, 2), 92, 70]
  ]);

  var options = {
    chartArea: {
      bottom: 72
    },
    hAxis: {
      slantedText: true
    },
    height: 400,
    legend: {
      maxLines: 2,
      position: 'top'
    },
    tooltip: {
      isHtml: true
    },
    trendlines: {
      0: {
        labelInLegend: '0-Linear Trend',
        showR2: true,
        type: 'linear',
        visibleInLegend: true
      },
      1: {
        labelInLegend: '1-Linear Trend',
        showR2: true,
        type: 'linear',
        visibleInLegend: true
      }
    },
    width: 400
  };

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

  google.visualization.events.addListener(chart, 'onmouseover', function (props) {
    var tooltipLabels = container.getElementsByTagName('span');
    for (var i = 0; i < tooltipLabels.length; i++) {
      if (tooltipLabels[i].innerHTML.indexOf('y =') > -1) {
        tooltipLabels[i].innerHTML = 'CUSTOM TEXT:';
      }
    }
  });

  chart.draw(data, options);
});

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

来源：https://stackoverflow.com/questions/48010684/replace-a-showr2-with-a-custom-text-in-a-google-chart

标签

charts

google-visualization