gpt4 book ai didi

javascript - 如何制作 Google 折线图引用元素值而不是静态数字

转载 作者:行者123 更新时间:2023-11-28 03:24:35 25 4
gpt4 key购买 nike

我目前正在尝试设计一个 Google 图表,该图表是根据整个 html 文档中某些 div 标签内的值进行建模的。

就目前而言,整个文档中有许多标签,例如:

<div id="abc"> 11000 </div>
<div id="def"> 12500 </div>
<div id="ghi"> 17000 </div>

我希望 Google 图表将这些值引用为 Y 轴。

Google 图表代码可以正常工作,如下所示:

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Current', 'Proposed'],
['25', 10000],
['35', 15170],
['45', 21660],
]);
var options = {
title: 'Balance Comparison',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
<div id="curve_chart" style="width: 900px; height: 500px"></div>

我想以引用 div 值的方式更改数组。我尝试这样做,结果是这样的:

function drawChart() {
var y1 = document.getElementByID("abc")
var y2 = document.getElementByID("def")
var y3 = document.getElementByID("ghi")
var data = google.visualization.arrayToDataTable([
['Age', 'Current'],
['25', y1],
['35', y2],
['45', y3],
]);

但这似乎不起作用,我不知道如何让它工作。

最佳答案

它会起作用,首先,有几件事......

javascript 区分大小写,请将 getElementByID 更改为 getElementById(注意最后一个字母)

getElementById 获取元素,但您想要元素的内容。
使用 innerHTML 获取内容。

var y1 = document.getElementById('abc').innerHTML;

最后,谷歌图表需要一个数字作为 y 值,
innerHTML 返回一个字符串。

使用parseFloat将字符串转换为数字。

parseFloat(y1)

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

google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var y1 = document.getElementById('abc').innerHTML;
var y2 = document.getElementById('def').innerHTML;
var y3 = document.getElementById('ghi').innerHTML;

var data = google.visualization.arrayToDataTable([
['Age', 'Current'],
['25', parseFloat(y1)],
['35', parseFloat(y2)],
['45', parseFloat(y3)],
]);

var options = {
title: 'Balance Comparison',
curveType: 'function',
legend: { position: 'bottom' }
};

var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="abc"> 11000 </div>
<div id="def"> 12500 </div>
<div id="ghi"> 17000 </div>
<div id="curve_chart"></div>

关于javascript - 如何制作 Google 折线图引用元素值而不是静态数字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58759994/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com