Question

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

我尝试做的是在更改时连接文本框以更新PROPANE =＆gt;剑道图的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

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

我建议用几种方法来纠正但使用textbox函数。

Number()

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

1 个答案: