以下 2 个 div 正在使用本地存储将测试和时间输出到 HTML 页面上。这 2 个值在 HTML 页面上显示正常。
<div id="test">
</div>
<div id="time">
</div>
我如何更改此 JavaScript 代码上的 y 值以匹配本地存储值,以便它“测试 1= 0.25”,这将显示在图表上。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
animationEnabled: true,
legend: {
cursor:"pointer",
itemclick : function(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}
},
axisY: {
title: "Time"
},
toolTip: {
shared: true,
content: function(e){
var str = '';
var total = 0 ;
var str3;
var str2 ;
for (var i = 0; i < e.entries.length; i++){
var str1 = "<span style= 'color:"+e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: <strong>"+ e.entries[i].dataPoint.y + "</strong> <br/>" ;
total = e.entries[i].dataPoint.y + total;
str = str.concat(str1);
}
str2 = "<span style = 'color:DodgerBlue; '><strong>"+e.entries[0].dataPoint.label + "</strong></span><br/>";
str3 = "<span style = 'color:Tomato '>Total: </span><strong>" + total + "</strong><br/>";
return (str2.concat(str)).concat(str3);
}
},
data: [
{
type: "bar",
showInLegend: true,
name: "Black",
color: "#000000",
dataPoints: [
{ y: 0.18, label: "Test"},
{ y: 0.12, label: "Test 1"},
{ y: 0.59, label: "Test 2"},
{ y: 1.15, label: "Test 3"},
]
},
]
});
chart.render();
}
</script>
<script type="text/javascript" src="js/canvasjs.min.js"></script>
<script type="text/javascript" src="js/chart.js"></script>
</head>
<body>
<div id="bar" class="full-width">
<span>Results</span>
</div>
<br>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
此图表已输入设置值,而我想知道我可以在其中显示“div”值吗?
最佳答案
首先创建一个空的 dataPoints 数组,遍历 localStorage 对象创建一个带有 Y 和测试值的对象,然后推送到 dataPoints 数组
dataPoints =[];
for(loop through local storage obj) {
var coordObj ={};
coordObj.Y = value from local storage
coordObj.label = "test
dataPoints.push(coordObj);
}
关于在另一个 HTML 页面上显示 HTML 值的 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36461615/