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

Question

我正在尝试创建交互式剑道图表。共有三个系列：CAPITAL、FUEL 和 OM。每个系列都有三个数据值：PROPANE、DIESEL 和 ELECTRIC。

我正在尝试做的是在更改时连接一个文本框以更新 Kendo 图表的 PROPANE => 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 专家。这是某种奇怪的关闭还是什么？

Answer 1

我过去遇到过这个问题，基本上图表需要一个数字，而你的textbox 的.val() 给你一个字符串。

几种纠正方法，但我建议使用Number() 函数。

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