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

【问题标题】：Creating charts from input data in html tables?从 html 表中的输入数据创建图表？
【发布时间】：2016-05-18 07:47:41
【问题描述】：

我发现许多基于 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() 函数中的变量。但它给出了错误。

帮助！！ :-)

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

你可以试试

jQuery

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

javascript

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

或者你可以告诉我尝试帮助的错误

【讨论】：

现在我将它添加到代码中。 <input type="number" id="inputValue" value=20 onclick="hello()">
var test = document.getElementById("inputValue").value;
和 x:test 这应该按照逻辑工作。但是当我单击文本字段时，它不会调用 hello() 函数。然后它生成图表但不考虑分配给test的字段。
你可以尝试用另一个事件“更改”或绑定？
我会尝试这样做的。

【解决方案2】：

普拉塔梅什，

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

选中此example，点击按钮即可添加值。

【讨论】：