用Google图表中的自定义文本替换showR2？ [英] Replace a showR2 with a custom text in a Google Chart?

问题描述

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

我偶然发现一个视图布局的问题

1. 如何用一些自定义文本替换show2r图例？在
   的时刻，表示：y = 2.032E-4 * x - 8.203 r ^ 2 = 7.005E-3，我希望
   将其替换为Trendline（Lineair）
   2 /传说会得到一个
   1/2和左右箭头我喜欢这个图例始终是
   visible？
   3 / x轴不显示所有日期，我该如何设置那
   作为默认值？
   4 /如何在6月份的月份添加垂直线？

问候

解决方案

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

没有标准选项更改工具提示中的值，

，但可以使用事件手动更改 - > onmouseover

当图例位置顶部，

时，您可以使用选项 - > l egend.maxLines

增加可用的行数并防止箭头...

确保所有日期在x轴上显示，

允许使用选项 - > chartArea.bottom

请参阅下面的工作片段，了解每个示例...

  google.charts.load（'current'，{packages：['corechart']}）。then（function（）{var data = google.visualization.arrayToDataTable（[['x'，'y0'，'y1' ]，[新日期（2017,11,28），175,10]，[新日期（2017,11,29），159,20]，[新日期（2017,11,30），126,35]， [新日期（2017,11,31），129,40]，[新日期（2018,0,1），108,60]，[新日期（2018,0,2），92,70]]）; var options = {chartArea：{bottom：72}，hAxis：{slantedText：true}，height：400，legend：{maxLines：2，position：'top'}，工具提示：{isHtml：true}，趋势线：{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）; （var i = 0; i< tooltipLabels.length; i ++）{if（ tooltipLabels [i] .innerHTML.indexOf（'y ='）> -1）{tooltipLabels [i] .innerHTML ='CUSTOM TEXT：';}}}）;  
  < script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =chart_div>< / div>  

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

1. 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

解决方案

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>

这篇关于用Google图表中的自定义文本替换showR2？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！