如何在两个 Y 值都是用户输入的 HTML 中创建多 y 轴图表？

Question

Example of what I am going for 我更愿意在 HTML 中执行此操作，而不是 excel，因为现在我不需要保存任何此类信息，也不想重新创建每天一个电子表格。目前这只是显示当天实时数据的概念证明。

我对 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 的数组中

如能提供任何有关查找位置的提示或建议，我们将不胜感激。

Answer 1

看起来这可能是您的问题：

Actual = Number(document.getElementById("1").value);
Planned = Number(document.getElementById("2").value);

首先...您输入的 ID 不是“1”和“2”，而是 "Actual" 和 "Planned" .getElementById("Actual").value、.getElementById("Planned").value

另一件事是您似乎使用 Actual = Number(... 而不是 var actual = Number(... 声明全局变量我对您的范围了解不多，无法说这是错误的，但需要考虑一些事情。

Answer 2

CanvasJS 接受数据点中的 x 和 y 值作为对象 ({x: xValue, y: yValue})。以这种格式传递它应该可以正常工作。请在下面找到工作代码：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
  var dpsPlanned = [], dpsActual = []; //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"
    }],
    data: [
      {
        type: "column",
        showInLegend: true,
        //axisYIndex: 0, //Defaults to Zero
        name: "Planned",      
        dataPoints: dpsPlanned
      },

      {
        type: "column",
        showInLegend: true,                  
        axisYType: "secondary",
        //axisYIndex: 0, //Defaults to Zero
        name: "Actual",      
        dataPoints: dpsActual
      },

    ]
  });
  chart.render();

  function addDataPointsAndRender() {
    var actual = Number(document.getElementById("Actual").value);
    var planned = Number(document.getElementById("Planned").value);
    dpsActual.push({ y: actual });
    dpsPlanned.push({ y: planned });
    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>

如何在两个 Y 值都是用户输入的 HTML 中创建多 y 轴图表？

How do I create a multiple y axis chart in HTML where both Y values are User input?

javascript

html

canvasjs