Javascript 更新剑道图系列'；带有变量的数据会导致重画从图表中画出列

我正在尝试创建一个交互式剑道图。有三个系列：资本、燃料和OM。每个系列有三个数据值：丙烷、柴油和电力

我正在尝试做的是连接一个关于更改的文本框，以更新剑道图表的丙烷=>资本值并更新图表。出于某种原因，当我这样做时，修改后的列被绘制在某个未知的高度，该高度超出了图表（无意使用双关语）

下面是javascript：

// chartSeries Index constants
var CAPITAL = 0;
var FUEL = 1;
var OM = 2;

var seriesData = {
    capital: {
        propane: 24200,
        diesel: 25100,
        electric: 34400
    },
    fuel: {
        propane: 37783,
        diesel: 44969,
        electric: 7520
    },
    om: {
        propane: 24960,
        diesel: 24960,
        electric: 15600
    }
}

$(document).ready(
    function () {
        createChart();
    });

$(document).bind("kendo:skinChange", createChart);

function createChart() {
    $("#chart").kendoChart({
        chartArea: {
            width: 600,
            height: 400
        },
        title: { text: "Lift Truck Ownership Cost Comparison" },
        legend: { visible: false },
        seriesDefaults: {
            type: "column",
            stack: true
        },
        series: [
            {
                name: "Capital Costs",
                data: [seriesData.capital.propane, seriesData.capital.diesel, seriesData.capital.electric],
                color: "#56B5FC"
            }, {
                name: "Fuel",
                data: [seriesData.fuel.propane, seriesData.fuel.diesel, seriesData.fuel.electric],
                color: "#E5DB14"
            }, {
                name: "O & M",
                data: [seriesData.om.propane, seriesData.om.diesel, seriesData.om.electric],
                color: "#14D314"
            }
        ],
        valueAxis: {
            max: 100000,
            line: { visible: false },
            minorGridLines: { visible: true }
        },
        categoryAxis: {
            categories: ["Propane", "Diesel", "Electric"],
            majorGridLines: { visible: false }
        },
        tooltip: {
            visible: true,
            template: "#= series.name #: #= value #"
        }
    });
}

$(document).on("change", "#propaneCapitalCost", function() {
    var chart = $("#chart").data("kendoChart");

    var temp = $("#propaneCapitalCost").val();
    chart.options.series[CAPITAL].data = [temp, 25100, 34400];

    chart.refresh();
});

以及html：

<style>
    .emissionHeader {
        font-weight: bold;
        margin-bottom: 5px;
    }
     .emissionBottomBorder {
         border-bottom: thin solid #615A39;
         margin: 20px;
         padding: 10px;
         width: 200px;
     }

    .emissionLabel {
        width: 75px;
        text-align: right;
        float: left;
        margin-right: 3px;
    }

    .emissionTextBox {
        width: 100px;
    }
</style>

<div style="margin: 20px">
    <div style="margin-bottom: 20px"><h2>@ViewBag.Title</h2></div>

    <div id="dataEntry" style="float: left">
        <div class="emissionBottomBorder">
            <div class="emissionHeader">Adjust Capital Costs</div><div class="newline"></div>

            <div class="emissionLabel"><label class="k-label">Propane:</label></div>
            <input id="propaneCapitalCost" type="text" class="k-textbox emissionTextBox" />        
            <div class="newline"></div>
        </div>
    </div>
    <div id="example" style="width: 600px; height: 400px; float: left">
        <div class="k-content">
            <div id="chart"></div>
        </div>
    </div>
</div>

---

我完全不知道差别在哪里。公平地说，我决不是js专家。这是某种奇怪的结束还是什么？

我以前遇到过这个问题，基本上图表需要一个数字，而

文本框的
的
会给你一个字符串

有几种纠正方法，但我建议使用
Number（）
函数

var temp = Number($("#propaneCapitalCost").val());
chart.options.series[CAPITAL].data = [temp, 25100, 34400];

这很有效。我从来没有想过，但我猜它的价值评估与我想象的不同。谢谢
var temp = Number($("#propaneCapitalCost").val());
chart.options.series[CAPITAL].data = [temp, 25100, 34400];