javascript - 谷歌图表，更改趋势线方程参数标签

Question

我想(仅)将方程参数标签从 Age 和 Diameter 更改为 Y 和 X从(年龄 = 4.885 * 直径 + 0.73) 到 (Y = 4.885 * X + 0.73)在标题和工具提示内。

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Diameter', 'Age'],
    [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);

  var options = {
    title: 'Age of sugar maples vs. trunk diameter, in inches',
    hAxis: {title: 'Diameter'},
    vAxis: {title: 'Age'},
    legend: {
      alignment: 'end',
      position: 'top'
    },
    series: {
      0: {
        visibleInLegend: true
      }
    },
    trendlines: {
      0: {
        visibleInLegend: true
      }
    }
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var equation = $('text[text-anchor="start"][fill="#222222"]').text();
    console.log(equation);
  });

  chart.draw(data, options);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

有人可以帮我吗？

Answer 1

没有标准选项，
您需要在图表的 'ready' 事件上手动更改。

但将列标签更改为'X', 'Y',
可能会更容易然后手动将系列标题更改为'Age'...

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y'],
    [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);

  var options = {
    title: 'Age of sugar maples vs. trunk diameter, in inches',
    hAxis: {title: 'Diameter'},
    vAxis: {title: 'Age'},
    legend: {
      alignment: 'end',
      position: 'top'
    },
    series: {
      0: {
        visibleInLegend: true
      }
    },
    trendlines: {
      0: {
        visibleInLegend: true
      }
    }
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var equation = $('text[text-anchor="start"][fill="#222222"]').get(0);
    equation.textContent = 'Age';
  });

  chart.draw(data, options);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

编辑

在工具提示中显示'Age' 作为系列标题，
您可以使用自定义工具提示。

这里，数据 View 用于添加工具提示列。

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
  calc: function (dt, row) {
    return 'Age\n' + dt.getFormattedValue(row, 0) + ', ' + dt.getFormattedValue(row, 1);
  },
  role: 'tooltip',
  type: 'string'
}]);

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y'],
    [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      return 'Age\n' + dt.getFormattedValue(row, 0) + ', ' + dt.getFormattedValue(row, 1);
    },
    role: 'tooltip',
    type: 'string'
  }]);

  var options = {
    title: 'Age of sugar maples vs. trunk diameter, in inches',
    hAxis: {title: 'Diameter'},
    vAxis: {title: 'Age'},
    legend: {
      alignment: 'end',
      position: 'top'
    },
    series: {
      0: {
        visibleInLegend: true
      }
    },
    trendlines: {
      0: {
        visibleInLegend: true
      }
    }
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var equation = $('text[text-anchor="start"][fill="#222222"]').get(0);
    equation.textContent = 'Age';
  });

  chart.draw(view, options);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>