Google图表 - 获取线性趋势线的等式 [英] Google charts - Get the equation of Linear trendlines
问题描述
我有一张这样的图表（由Google图表绘制）
该线由Google生成，可选择线性趋势线
$ b
请参阅以下工作片段...
google.charts.load（'current'，{callback：drawChart，packages：['corechart']}）;函数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：'糖枫树年龄与树干直径，以英寸为单位'，hAxis：{title：'Diameter'}，vAxis：{title：'Age'}，legend：{alignment：'end'，position ：'top'}，系列：{0：{visibleInLegend：false}}，趋势线：{0：{visibleInLegend：true}}}; var chart = new google.visualization.ScatterChart（document.getElementById（'chart_div'））; chart.draw（data，options）;}
< script>< / div>< / script>
$ b 编辑
p>
将公式添加到图例后，您可以从< text> 元素用于绘制图例标记
，但需要先等待'ready'事件，
要知道图表已完成绘图，您还需要一种方法来确定图例标记< text> 元素
来自其他标签，例如图表标题
在这个例子中，标题和图例标记
都有一个属性 text-anchor 值为'start'
text-anchor 可能会根据图例' s 对齐和位置
字体颜色（< code $> 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：'糖枫树年龄与树干直径，以英寸为单位'，hAxis：{title：'Diameter'}，vAxis：{title：'Age'}，legend：{alignment：'end'，position ：'top'}，系列：{0：{visibleInLegend：false}}，趋势线：{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>
I have a chart like this (drawn by google charts) the line is generated by google with option of Linear trendlines
image
code
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);
}
how to know the equation of this line?
adding the trendline to the legend will reveal the equation...
trendlines: {
0: {
visibleInLegend: true
}
}
you can remove the series from the legend, if so desired...
series: {
0: {
visibleInLegend: false
}
},
see following working snippet...
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>
EDIT
once the equation has been added to the legend,
you can get the value from the <text> element used to draw the legend marker
but need to wait on the 'ready' event first,
to know the chart has finished drawing
also, you will need a way to determine the legend marker <text> element
from the other labels, such as the chart title
in this example, both the title and the legend marker
have an attribute text-anchor with a value of 'start'
text-anchor could change depending the legend's alignment and position
the font color (fill) is used to separate the title from the legend marker...
see following working snippet...
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>
这篇关于Google图表 - 获取线性趋势线的等式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![代码 google.charts.setOnLoadCallback（drawChart）; 函数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：'糖枫树年龄与树干直径，以英寸为单位'， hAxis：{title：'Diameter'}， vAxis：{title：'Age'}， legend：'none'， trendlines：{0：{}} //绘制数据系列0的趋势线。 var chart = new google.visualization.ScatterChart（document.getElementById（'chart_div'））; chart.draw（data，options）; } 如何知道方程式 解决方案将趋势线添加到图例将揭示方程式... 趋势线：{ 0：{ visibleInLegend：true } } 如果需要，您可以从图例中删除该系列... 系列：{ 0：{ visibleInLegend：false } }，](\"https://i.stack.imgur.com/FwF8w.png\"){kind=link}