用Google图表中的自定义文字替换showR2？

Question

我正在玩谷歌图表以某种方式看待。在这种情况下，我有一个组合图表的行和柱形图。

我偶然发现了“布局”问题

1. 如何用一些自定义文本替换show2r图例？在 那一刻说：y = 2.032E-4 * x - 8.203 r ^ 2 = 7.005E-3我想要 将其替换为“Trendline（Lineair） 2 /传说得到了一个 1/2和箭头左右。我喜欢永远的传奇 可见？ 3 / x轴不显示所有日期，我该如何设置 作为默认？ 4 /如何在月份6月添加垂直线？



此致

Answer 1

要更改图例中的trendline标签，请使用选项 - ＆gt; labelInLegend

没有标准选项来更改工具提示中的值，
但它可以使用事件手动更改 - ＆gt; onmouseover

当图例的位置为top时，
你可以使用选项 - ＆gt; legend.maxLines
增加可用线数并防止箭头......

确保所有日期都显示在x轴上，
通过使用选项允许足够的空间 - ＆gt; chartArea.bottom

请参阅以下工作代码段，了解每个代码的示例...

＆＃13;

＆＃13;

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);
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;