如何從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/作為我的“修復”