从html表中的输入数据创建图表

Creating charts from input data in html tables?

本文关键字：数据 创建 输入 html      更新时间：2023-09-26

我发现了许多基于jquery和javascript的插件，它们从表中生成图表，但所有的表值都是硬编码的。但是我的表值是来自用户的输入，我需要动态生成图表。知道我该怎么做吗？

目前我正在使用canvasjs。

<!DOCTYPE HTML>
<html>
<head>
<title>My Chart</title>
<script   src="https://code.jquery.com/jquery-1.11.1.min.js" integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE="   crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery.canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function hello() {
//Better to construct options first and then pass it as a parameter
  var options = {
    title: {
        text: "My Chart"
    },
            animationEnabled: true,
    data: [
    {
        type: "column", //change it to line, area, bar, pie, etc
        dataPoints: [
            { x:25, y: 10 },
            { x: 20, y: 11 },
            { x: 30, y: 14 },
            { x: 40, y: 16 },
            { x: 50, y: 19 },
            { x: 60, y: 15 },
            { x: 70, y: 12 },
            { x: 80, y: 10 }
        ]
    }
    ]
};
$("#chartContainer").CanvasJSChart(options);
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

然后，我尝试使用document.getElementById()从输入中获取变量值，并将其分配给hello()函数中的变量。但它给出了错误。

救命！！：-）

您可以尝试

Jquery

var test = $('#inputValue').val()

javascript

var test = document.getElementById("inputValue").value;

或者你可以向我显示尝试帮助的错误

Prathamesh，

如果您想在单击按钮时添加dataPoint，可以使用document.getElementById("inputValue").value和document.getElementById("buttonID").onclick。或者document.getElementById("inputValue").onchange，如果你想增加价值的变化。

检查此示例，其中值是在单击按钮时添加的。

相关文章：