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

请参阅我的小提琴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中的值，而不是整个元素。

＆＃13;

＆＃13;

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();

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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/了解我的“修复”