如何将 javascript id 数据显示到饼图（Highchart.js）中？

Question

我做了一个计算器...现在数学被计算到 javascript 中，然后我使用这些 id 来显示结果。我想在此计算器中添加饼图和条形图，并且将显示计算出的数字。我真的很初学者..您的帮助表示赞赏..很快就需要了。非常感谢

FD FD含税 总投资额 卢比

            <input class="amount-slider" name="realTotalInvestmentAmount" id="myTotalInvestmentAmount" type="range" step="500" min="500" max="150000" value="5000" />
          <div id="amount-slider" class="steps">
                       <span class="tick" style="left: 0%;">|<br> <span
                          class="marker">0</span></span> <span
                          class="tick d-none d-sm-block" style="left: 12.5%;">|<br>
                       <span class="marker">18K</span></span> <span
                          class="tick" style="left: 25%;">|<br> <span
                          class="marker">37K</span></span> <span
                          class="tick d-none d-sm-block" style="left: 37.5%;">|<br>
                       <span class="marker">56K</span></span> <span
                          class="tick" style="left: 49.5%;">|<br> <span
                          class="marker">75K</span></span> <span
                          class="tick d-none d-sm-block" style="left: 62.8%;">|<br>
                       <span class="marker">95K</span></span> <span
                          class="tick" style="left: 75.3%;">|<br> <span
                          class="marker">1.14L</span></span> <span
                          class="tick d-none d-sm-block" style="left: 87.5%;">|<br>
                       <span class="marker">1.33L</span></span> <span
                          class="tick" style="left: 100%;">|<br> <span
                          class="marker">1.5L</span></span>
                    </div>
        </div>
        <div class="sip-calculator-year py-3">
            <div class="row form-group lamount">
                       <label class="col-lg-4 control-label" id="amountLabel">Number of Years</label>
                       <div class="col-lg-6">
                          <div class="input-group">
                             <input class="form-control" name="Years" id="inputYears" type="text" value="10" min="1" max="25" step="1" oninput="showValYears(this.value)" />
                             <div class="input-group-append">
                                <span class="input-group-text" id="years">Yr</span>
                             </div>
                          </div>
                       </div>
                    </div>
            <input class="year-slider" name="realYears" id="myYears" type="range" min="1" max="25" step="1" value="10">
                                   <div id="year-slider" class="steps">
                       <span class="tick" style="left: 0%;">|<br> <span
                          class="marker">1</span></span><span class="tick"
                          style="left: 17.3%;">|<br> <span class="marker">5</span></span><span
                          class="tick" style="left: 37.7%;">|<br> <span
                          class="marker">10</span></span><span class="tick"
                          style="left: 58%;">|<br> <span class="marker">15</span></span><span
                          class="tick" style="left: 78.3%;">|<br> <span
                          class="marker">20</span></span><span
                          class="tick" style="left: 100%;">|<br> <span
                          class="marker">25</span></span>
                    </div>
        </div>
        <div class="sip-calculator-roi">
             <div class="row form-group lamount">
                       <label class="col-lg-4 control-label" id="amountLabel">Rate of Interest</label>
                       <div class="col-lg-6">
                          <div class="input-group">
                             <input class="form-control" name="Retunrs" id="inputRoi" type="text" value="7" min="1" max="15" step="1" oninput="showValRoi(this.value)" / >
                             <div class="input-group-append">
                                <span class="input-group-text" id="roi">%</span>
                             </div>
                          </div>
                       </div>
            </div>
            <input class="roi-slider" name="realRoi" id="myRoi" type="range" min="1" max="15" step="1" value="7">
            <div id="roi-slider" class="steps">
                       <span class="tick" style="left: 0%;">|<br> <span
                          class="marker">1</span></span> <span class="tick"
                          style="left: 15.3%;">|<br> <span class="marker">3</span></span>
                       <span class="tick" style="left: 36%;">|<br> <span
                          class="marker">6</span></span> <span class="tick"
                          style="left: 57%;">|<br> <span class="marker">9</span></span>
                        <span class="tick"
                          style="left: 77.5%;">|<br> <span class="marker">12</span></span>
                       <span class="tick" style="left: 100%;">|<br> <span
                          class="marker">15</span></span>
                    </div>
        </div>
        <div class="sip-calculator-roi pt-3">
            <p>
                <div id="tax_bracket" style="display: none;">
                    <label>Select Tax Bracket</label>
                    <div class="select">
                        <select name="slct" id="slct" oninput="showValTaxBracket(this.value)">
                            <!-- <option selected disabled>Choose an option</option> -->
                            <option selected value="0">0% (Less than 2.5 Lac)</option>
                            <option value="5">5% (2.5 - 5 Lac)</option>
                            <option value="20">20% (5 - 10 Lac)</option>
                            <option value="30">30% (10 Lac+)</option>
                        </select>
                    </div>
                </div>
            </p>
        </div>
        <p style="margin-top: 1em;font-size: 1.2em; background: #f1f2f3; border-radius: 7px; padding: 20px;">
            <strong>Total Value:</strong>
            <span id="totalValue" style="font-size: 1.2em;margin-left: 8px;"></span>
        </p>
        <!-- <div style="margin-top: 15px;"><img class="groww-logo" src="groww-logo-ed.png" target="_parent" align="right"/></div> -->
    </div>
</form>    


<script>
    'use strict';
    var amountSlider = document.getElementById("myTotalInvestmentAmount");
    var amountOutput = document.getElementById("inputTotalInvestment");
    var roiSlider = document.getElementById("myRoi");
    var roiOutput = document.getElementById("inputRoi");
    var yearSlider = document.getElementById("myYears");
    var yearOutput = document.getElementById("inputYears");

    var taxBracket = document.getElementById("slct");

    amountOutput.innerHTML = amountSlider.value;
    roiOutput.innerHTML = roiSlider.value;
    yearOutput.innerHTML = yearSlider.value;

    amountSlider.oninput = function () {
        amountOutput.innerHTML = this.value;
    }
    roiSlider.oninput = function () {
        roiOutput.innerHTML = this.value;
    }
    yearSlider.oninput = function () {
        yearOutput.innerHTML = this.value;
    }

    function showTotalInvestment(newVal) {
        amountSlider.value = newVal;
        calculateIt();
    };

    function showValRoi(newVal) {
        roiSlider.value = newVal;
        calculateIt();
    };

    function showValYears(newVal) {
        yearSlider.value = newVal;
        calculateIt();
    };

    function showValTaxBracket(newVal) {
        var taxBracketValue = taxBracket.value;
        calculateIt();
    }

    amountSlider.addEventListener("input", updateValueAmount);
    roiSlider.addEventListener("input", updateValueRoi);
    yearSlider.addEventListener("input", updateValueYears);

    function updateValueAmount(e) {
        amountOutput.value = e.srcElement.value;
        calculateIt();
    }

    function updateValueRoi(e) {
        roiOutput.value = e.srcElement.value;
        calculateIt();
    }

    function updateValueYears(e) {
        yearOutput.value = e.srcElement.value;
        calculateIt();
    }

    var calculatorMode = 'fd';
    var heading = document.getElementById("heading");
    var amountLabel = document.getElementById("amountLabel");

    function changeMode(mode) {
        calculatorMode = mode;
        heading.innerHTML = mode === 'fd' ? 'FD Calculator' : 'FD with Tax Calculator';
        if (mode === 'fd') {
            document.getElementById("tax_bracket").style.display = "none";
        } else {
            document.getElementById("tax_bracket").style.display = "unset";
        }
        return calculatorMode;
    }

    function calculateIt() {
        var totalValueOutput = document.getElementById("totalValue");

        var totalInvestmentValue = document.sipForm.realTotalInvestmentAmount.value; //fieldname2
        var rateOfInterestValue = document.sipForm.realRoi.value; //fieldname6
        var numberofYearsValue = document.sipForm.realYears.value; //fieldname3

        var taxBracketValue = taxBracket.value; //fieldname7


        var fd = Math.round(totalInvestmentValue * (Math.pow((1 + rateOfInterestValue / 400), 4 * numberofYearsValue)));
        var fdWithTax = Math.round(totalInvestmentValue * (Math.pow((1 + rateOfInterestValue * (1 - taxBracketValue / 100) / 400), 4 * numberofYearsValue)));

        var finalOutput = calculatorMode === 'fd' ? fd : fdWithTax;

        totalValueOutput.innerHTML = "Rs. " + finalOutput.toLocaleString();
    }
    calculateIt();
</script>

Answer 1

您想使用 Highcharts 库来呈现图表吗？

如果是，这里是基本文档，可以帮助您了解如何呈现图表：https://www.highcharts.com/docs/getting-started/your-first-chart

熟悉之后你应该可以自己创建图表了——如果遇到任何问题，请在一些在线编辑器上重现你的尝试，描述问题所在并与社区分享。