javascript - 如何从 html 元素获取 javascript var 数据？ (使用 canvasjs)

Question

我正在尝试使用 CanvasJS 制作图表。这是我的 HTML:

<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<div id="test1">100</div>
<div id="test2">110</div>

我的 JS 是

var dataPoint1 = document.getElementById("test1");
var dataPoint2 = document.getElementById("test2");

var chart = new CanvasJS.Chart("chartContainer",
{  
  data: [
  {
    type: "column",
    dataPoints: [
        { label: "Apple", y: dataPoint1},
        { label: "Mango", y: dataPoint2}
    ]
  }
  ]
});

chart.render();

看我的 fiddle here : 图表未正确呈现。

Answer 1

您需要添加 innerHTML为了访问 DOM 元素中的内容。此外，您还需要申请 parseInt解析字符串并返回一个整数。

var dataPoint1 = document.getElementById("test1").innerHTML;
var dataPoint2 = document.getElementById("test2").innerHTML;

see your updated jsfiddle here

在您的原始代码中，您将变量设置为整个元素，而不是元素中的值。您应该始终使用 console.log然后您可以在控制台中看到您得到的结果。检查 typeof 也很有用元素中有什么，因为这可以帮助您了解它返回的是 String而不是 Number .

即console.log(dataPoint1) -- 最初这是返回 <div id="test1">10</div>这会帮助您意识到您需要获取 div 中的值，而不是整个元素。

var dataPoint1 = document.getElementById("test1").innerHTML;
var dataPoint2 = document.getElementById("test2").innerHTML;

var chart = new CanvasJS.Chart("chartContainer",
	{  
      data: [
      {
        type: "column",
        dataPoints: [
            { label: "Apple", y: parseInt(dataPoint1)},
            { label: "Mango", y: parseInt(dataPoint2)}
        ]
      }
      ]
    });

 chart.render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<div id="test1">10</div>
<div id="test2">12</div>