Javascript Highcharts-如何使用HTML输入框为饼图输入数据？

抱歉，这是我的第一个stackoverflow问题，如果我的格式错误，请告诉我

我试图使用

document.getElementById（“id”）.value

从输入框中获取输入值，但我不太明白如何使其工作。我看到了其他使用JSON或JQuery的答案，但我在这方面还没有太多经验，所以如果我可以在没有这些（如果可能的话）的情况下完成这项工作，我会选择这个选项。 任何被注释掉的代码都只是我试图让它工作。 （旁注：我知道我的HTML代码可能有点磨损，这不是现在的优先事项）

价格






document.addEventListener（'DOMContentLoaded'，函数（）{
var myChart=Highcharts.chart({
图表：{
renderTo:'容器'，
键入“pie”，
活动：{
加载：函数（事件）{
var图表=此，
点=图表。系列[0]。点，
len=点。长度，
总计=0，
i=0；
对于（；i

运费：



打包成本：



税：



挂牌费：



保存更改

---

我会链接到一个JSFiddle，但不确定我会怎么做，因为我的JS目前嵌入在我的HTML lol中。提前感谢任何决定帮助我的人。任何与此相关的建议都是有用的

您需要获取数据并将其以Highcharts所需的格式保存。下面是一个简单的例子：

document.getElementById('btn').addEventListener('click', function() {
    var data = [
        parseInt(document.getElementById('data1').value),
        parseInt(document.getElementById('data2').value)
    ];

    Highcharts.chart('container', {
        series: [{
            type: 'pie',
            data
        }]
    });
});

---

现场演示：

---

API参考：

解决方案有两个：a）实时或单击按钮后从表单中获取并处理值b）更新实时图表的数据。你对哪一个有问题？到目前为止你尝试了什么？@ChrisG，嘿，所以我尝试了处理表单中的值，并尝试在单击按钮（填充所有字段后）时使其如此。函数将再次运行，但使用我输入的值来构建饼图。我对这两者都有点麻烦，因为它根本不起作用！虽然图表可以很好地处理预定义的值，但我是否可以上传到目前为止它是如何工作的图像？另外请记住，我不需要在输入数据后立即更新它，只需要在点击“保存更改”之后

document.getElementById('btn').addEventListener('click', function() {
    var data = [
        parseInt(document.getElementById('data1').value),
        parseInt(document.getElementById('data2').value)
    ];

    Highcharts.chart('container', {
        series: [{
            type: 'pie',
            data
        }]
    });
});