如何制作Google折线图参考元素值而不是静态数字

2024-05-11 • 问答

我目前正在尝试设计一个基于整个html文档中某些div标签中的值建模的Google图表。

按现状，整个文档中有许多标签，例如：

<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'],y1],y2],y3],]);

但是，这似乎不起作用，而且我对如何使其起作用感到困惑。

首先，它会起作用……

javascript区分大小写，请将getElementByID更改为getElementById（注意最后一个字母）

getElementById获取元素，但是您需要元素的内容。
使用innerHTML获取内容。

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

最后，Google图表期望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>

如何制作Google折线图参考元素值而不是静态数字

wangjiaxing85 回答：如何制作Google折线图参考元素值而不是静态数字

大家都在问