我正在尝试使用 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 :图表未正确呈现。
最佳答案
您需要添加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 中的值,而不是整个元素。
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>
关于javascript - 如何从 html 元素获取 javascript var 数据? (使用canvasjs),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36174059/