如何从html元素中获取javascript var数据?(使用canvasjs）

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

本文关键字：数据 使用 canvasjs var javascript html 元素 获取      更新时间：2023-09-26

我正在尝试用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();

请看我的小提琴：图表没有正确渲染。

您需要添加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>

我想您需要类似元素的值，并通过在+前面加一个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);

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

请参阅：http://jsfiddle.net/6gawzc74/4/对于我的"修复"

相关文章：