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

Posted 2021-04-09

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

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

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

问候

答案

要更改图例中的趋势线标签，请使用选项 - > labelInLegend

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

当传说的位置是top， 你可以使用选项 - > legend.maxLines 增加可用线数并防止箭头......

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

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

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>

以上是关于用Google图表中的自定义文字替换showR2？的主要内容，如果未能解决你的问题，请参考以下文章

用 Google BigQuery 中的文字替换正则表达式字符

为啥 autorest 用 Swagger 中的对象替换我的自定义结构？

用熊猫中的自定义索引替换数字索引[重复]

用 WooCommerce 中的自定义数量输入字段替换“添加到购物车”

用 Chrome 中的自定义文本替换默认的 html5 日期占位符

当行丢失时，用 Oracle SQL PIVOT 结果中的自定义值替换 NULL