使用变量更新剑道图表系列的数据会导致重绘将列从图表上绘制出来

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

我正在尝试做的是在更改时连接一个文本框，以更新剑道图表的丙烷 => CAPITAL 值并更新图表。出于某种原因，当我这样做时，更改的列是在图表之外的某个未知高度绘制的（没有双关语）。

这是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>

奇怪的是，如果我将onchange方法更改为以下内容，则重绘错误似乎不存在：

$(document).on("change", "#propaneCapitalCost", function() {
    var chart = $("#chart").data("kendoChart");
    //var temp = $("#propaneCapitalCost").val();
    chart.options.series[CAPITAL].data = [10000, 25100, 34400]; // Value hard coded
    chart.refresh();
});

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