使用变量更新 Kendo 图表系列的数据会导致重绘从图表中绘制列

Question

我正在尝试创建交互式 Kendo 图表。共有三个系列：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];

使用变量更新 Kendo 图表系列的数据会导致重绘从图表中绘制列

Updating a Kendo Chart series' data with a variable causes the redraw to draw the column off the chart

javascript

kendo-chart