Google图表 - 获取线性趋势线的等式

Question

我有一个这样的图表（由谷歌图表绘制） 该行由谷歌生成，可选择线性趋势线

图片

码

google.charts.setOnLoadCallback(drawChart);
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: 'none',
    trendlines: { 0: {} }    // Draw a trendline for data series 0.
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

如何知道这条线的等式？

Answer 1

将趋势线添加到图例中将显示等式......

trendlines: {
  0: {
    visibleInLegend: true
  }
}

如果需要，您可以从图例中删除该系列...

series: {
  0: {
    visibleInLegend: false
  }
},

请参阅以下工作代码段...

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: false
      }
    },
    trendlines: {
      0: {
        visibleInLegend: true
      }
    }
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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

编辑

将等式添加到图例后，
您可以从用于绘制图例标记的<text>元素中获取值 但需要先等待'ready'事件，
知道图表已经完成绘图

另外，您需要一种方法来确定图例标记<text>元素
来自其他标签，如图表标题
在这个例子中，标题和图例标记都是 属性text-anchor的值为'start'

text-anchor可能会根据图例alignment和position

而改变

字体颜色（fill）用于将标题与图例标记分开...

请参阅以下工作代码段...

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: false
      }
    },
    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 2

这对我有用：

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

google.visualization.events.addListener(chart, 'ready', function () {
  console.log(chart.Zl().jp[1].text);
});

chart.draw(data, options);

chart.Zl（）。jp如下所示：

 [
  {
    "id": "",
    "text": "Age",
    "brush": "{\"fill\":\"#3366cc\",\"fillOpacity\":1,\"stroke\":\"none\",\"strokeWidth\":1,\"strokeOpacity\":1,\"strokeDashStyle\":\"solid\",\"rx\":null,\"ry\":null,\"gradient\":null,\"pattern\":null,\"shadow\":null}",
    "index": 0,
    "ja": false
  },
  {
    "id": "_trendline",
    "text": "y = 4.885 * x + 0.73",
    "brush": "{\"fill\":\"#3366cc\",\"fillOpacity\":0.5,\"stroke\":\"none\",\"strokeWidth\":1,\"strokeOpacity\":1,\"strokeDashStyle\":\"solid\",\"rx\":null,\"ry\":null,\"gradient\":null,\"pattern\":null,\"shadow\":null}",
    "index": 1,
    "ja": true
  }
]

因此，对于每个系列，将有两个对象，一个用于系列，第二个用于趋势线，因此，例如，如果您有两个趋势线，则可以使用chart.Zl().jp[3].text获得第二个等式