Example of what I am going for我更喜欢用HTML进行此操作，因为到目前为止，我不需要保存任何此类信息，也不想每天都重新创建电子表格。目前，这仅是显示当天实时数据的概念证明。
我对HTML有一定的了解，但绝不是专家。
我正在尝试创建一个图表，以显示不同时间段的实际产量与计划产量。我正在尝试将x轴作为时间段。 8小时内的每个小时都是轴上的一个点。然后从网站上的用户输入文本框中获取两个y轴值，实际值和计划值。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var dps = []; //dataPoints.
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text: "Planned vs Actual Production"
},
axisX:{
title: "Hour",
valueFormatString: "####",
interval: 1
},
axisY:[{
id: "2",
title: "Planned",
lineColor: "#369EAD",
titleFontColor: "#369EAD",
labelFontColor: "#369EAD"
}],
axisY2:[{
title: "Actual",
lineColor: "#7F6084",
titleFontColor: "#7F6084",
labelFontColor: "#7F6084"
}],
function addDataPointsAndRender() {
Actual = Number(document.getElementById("Actual").value);
Planned = Number(document.getElementById("Actual").value);
dps.push({
axisY: Actual,
axisY2: Planned
});
chart.render();
}
data: [
{
type: "column",
showInLegend: true,
//axisYIndex: 0, //Defaults to Zero
name: "Planned",
xValueFormatString: "####",
dataPoints: [
{ x: 1, axisY: Planned },
{ x: 2, axisY: Planned },
{ x: 3, axisY: Planned },
{ x: 4, axisY: Planned },
{ x: 5, axisY: Planned },
{ x: 6, axisY: Planned },
{ x: 7, axisY: Planned },
{ x: 8, axisY: Planned }
]
},
{
type: "column",
showInLegend: true,
axisYType: "secondary",
//axisYIndex: 0, //Defaults to Zero
name: "Actual",
xValueFormatString: "####",
dataPoints: [
{ x: 1, axisY2: Actual },
{ x: 2, axisY2: Actual },
{ x: 3, axisY2: Actual },
{ x: 4, axisY2: Actual },
{ x: 5, axisY2: Actual },
{ x: 6, axisY2: Actual },
{ x: 7, axisY2: Actual },
{ x: 8, axisY2: Actual }
]
},
]
});
chart.render();}
var renderButton = document.getElementById("renderButton");
renderButton.addEventListener("click", addDataPointsAndRender);
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
Actual:
<input id="Actual" type="number" step="any" placeholder="Enter Actual">
Planned:
<input id="Planned" type="number" step="any" placeholder="Enter Planned">
<button id="renderButton">Add DataPoint & Render</button>
<button onClick="window.location.href=window.location.href">Reset Hour</button>
<div id="chartContainer" style="height: 270px; width: 100%;">
</div>
</body>
</html>
我专门遇到的问题是让用户输入axisY和axisY2的数组
任何关于寻找位置的提示或建议，将不胜感激。
看起来像是您的问题：
Actual = Number(document.getElementById("1").value);
Planned = Number(document.getElementById("2").value);
这里的第一件事……您输入的ID不是“ 1”和“ 2”，它们是“实际”和“计划中的” .getElementById("Actual").value，.getElementById("Planned").value
另一件事是，您似乎是用Actual = Number(...而不是var actual = Number(...声明了全局变量，但我对您的范围了解不多，所以这是错误的，但要考虑一下。