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

Question

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

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Pricer.ie</title>
        <link rel="stylesheet" href="homepage.css"/>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script type="text/javascript" src="/js/themes/gray.js"></script>
        <meta name="viewport" content="initial-scale=1.0, width=device-width"/>
    </head>
    <body>
        <nav class="navbar">
            <ul>
                <li class="logo">
                    <a href=""><img src="logopricer.png" alt="logo" id="logo" ></a>
                </li>
                <li>
                    <a href="login.py" class="logintopright">Login</a>
                </li>
            </ul>
        </nav>
        <main>
            <figure class="highcharts-figure">
                <div id="container" style="width:100%; height:400px;"></div>
                <script>
                    document.addEventListener('DOMContentLoaded', function () {
                    var myChart = Highcharts.chart({
                        chart: {
                            renderTo: 'container',
                            type: 'pie',
                            events: {
                                load: function(event) {
                                    var chart = this,
                                        points = chart.series[0].points,
                                        len = points.length,
                                        total = 0,
                                        i = 0;

                                    for (; i < len; i++) {
                                        total += points[i].y;
                                    }

                                    chart.setTitle({
                                        text: '<span style="font-size: 13px">Current Price</small><br>'  + '<b>' + '€' + total.toFixed(2) + '</b>',
                                        align: 'center',
                                        verticalAlign: 'middle',
                                        y: -10,
                                    });
                                }
                            }
                        },
                        title: {
                            text: 'Product Details'
                        },
                        tooltip: {
                            pointFormat: '<b>{point.percentage:.1f}</b>' + '<b>%</b>'
                        },
                        plotOptions: {
                            pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}: €{point.y:.2f}'
                            }
                            }
                        },
                        series: [{
                            name: 'Total', [{
                                name: 'Profit Margin',
                                // y: document.getElementById('pcost').value
                                y : 0.29
                            }, {
                                name: 'Taxes',
                                // y: document.getElementById('taxes').value // external thing! database cuz tax changes depending on product
                                y : 4.25
                            }, {
                                name: 'Ebay Fees',
                                // y: document.getElementById('listfee').value
                                y : 3.93
                            }, {
                                name: 'Unit + Shipping Costs',
                                // y : document.getElementById('icost').value + document.getElementById('scost').value
                                y : 17.03  
                            }],
                            size: '60%',
                            innerSize: '70%',
                            showInLegend:true,
                            dataLabels: {
                                enabled: true
                            }
                        }]
                    },
                    )
                    }
                    )
                </script>
            </figure>
            <article>
                <form>
                    <label for="icost">Item Cost:</label>
                    <input type="number" id="icost" name="icost" step="0.01"><br><br>
                    <label for="scost">Shipping Cost:</label>
                    <input type="number" id="scost" name="scost" step="0.01"><br><br>     <!-- names and ids are incorrect just like this for now -->
                    <label for="pcost">Pickpack Cost:</label>
                    <input type="number" id="pcost" name="scost" step="0.01"><br><br>
                    <label for="taxes">Taxes:</label>
                    <input type="number" id="taxes" name="taxes" step="0.01"><br><br>     <!-- shouldnt exist as taxes is from database but sure look-->
                    <label for="listfee">Listing Fee:</label>
                    <input type="number" id="listfee" name="listfee"><br><br>
                    <button onclick="Function()">Save Changes</button>
                  </form>
            </article>
        </main>
        <footer>
        </footer>
    </body>
<html>

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

Answer 1

您需要获取数据并将其放入 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
        }]
    });
});

现场演示： http://jsfiddle.net/BlackLabel/dyp5208b/

API 参考： https://api.highcharts.com/highcharts/series.pie.data

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

问题描述

1 个解决方案

解决方案1
1 2020-08-06 10:53:15

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

问题描述

1 个解决方案

解决方案1 1 2020-08-06 10:53:15

解决方案1
1 2020-08-06 10:53:15