如何从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();

在这里查看我的小提琴：图表未正确呈现。

Answer 1

您需要添加innerHTML才能访问DOM元素中的内容。 另外，您还需要应用parseInt来解析字符串并返回整数。

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

在这里查看更新的jsfiddle

在原始代码中，您将变量设置为整个元素，但未设置元素中的值。 您应该始终使用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> 

Answer 2

我想您需要像这样的元素的值，并通过在前面加上+或使用parseInt()将值转换为数字：

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

要么：

var dataPoint1 = parseInt(document.getElementById("test1").textContent.trim(), 10);
var dataPoint2 = parseInt(document.getElementById("test2").textContent.trim(), 10);

Answer 3

您可能需要使用dataPoint1.innerHTML来检索那些元素的实际内容。 然后，您需要使用parseInt()进一步解析为一个int

参见： http : //jsfiddle.net/6gawzc74/4/作为我的“修复”