如何从 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 来解析字符串和 return 一个整数。

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

see your updated jsfiddle here

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

即 console.log(dataPoint1) -- 最初这是 returning <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。然后，您需要进一步解析为 int，使用 parseInt()

参见：http://jsfiddle.net/6gawzc74/4/ 我的"fix"

如何从 html 元素获取 javascript var 数据？ （使用 canvasjs）

How to get javascript var data from html element? (working with canvasjs)

html

javascript

canvasjs

如何从 html 元素获取 javascript var 数据？（使用 canvasjs）