Question

我的项目是MVC 5，我正在使用以下代码生成具有多个系列的图表：

HTML：

<button data-bind="click: addItem">Add</button>
<button data-bind="click: removeItem">Remove</button>
 <div data-bind="kendoChart2: { title: { text: 'Graph Sample' }, 
series: seriesConfig,tooltip: {visible: true,template: '#= series.name #: #= value #'} , seriesDefaults: {
                        type: 'line',style: 'smooth'}}"> </div>

JavaScript

 var MainViewModel = function () {
        var self = this;
        this.Systolic = ko.observableArray([]);
        this.Diastolic = ko.observableArray([]);
        this.HeartRate= ko.observableArray([]);
        $.ajax({
            type: "GET",
            url: '/Charts/GetChart',
            contentType: "application/json; charset=utf-8",
            async: false,
            cache: false,
            dataType: "json",
            success: function (result) {
                //Diastolic
                if (result && result.Systolic.length > 0) {
                    for (var i = 0; i < result.Systolic.length; i++) {
                        self.Systolic.push(result.Systolic[i].Systolic);
                    }
                };
               ....
            },
            error: function (err) {
                    alert(err.status + " : " + err.statusText);
             }});

    this.seriesConfig = ko.observableArray([
                {name: "Systolic", data: this.Systolic()},
                {name: "Diastolic",data: this.Diastolic()}]);
    this.addItem = function() {
    this.seriesConfig.push({ name: "Heart Rate", data: this.HeartRate() });
                };
     this.removeItem = function() {
     this.seriesConfig.remove({ name: "Diastolic", data: this.Diastolic() });
        };
        }.bind(this);
      ko.kendo.bindingFactory.createBinding(
{
    name: "kendoChart",
    bindingName: "kendoChart2",
    watch: {
      data: function(value) {
          ko.kendo.setDataSource(this, value);
      },
      series: function(value) {
           this._sourceSeries = value;
           this.refresh();
           this.redraw();}            
    }
});
        window.viewModel = new MainViewModel();
        ko.applyBindings(window.viewModel);

图表运行良好，但是无法添加或删除序列吗？

注意： addItem有效，我得到了新系列的值：

series: function (value) {
        alert(value[2].name);
        this.seriesConfig = value;
        this.refresh();
        this.redraw();
      }

我也尝试加载所有系列，然后使用以下隐藏系列：

$("#kendoChart").getKendoChart().options.series[1].visible = false;
$("#kendoChart").getKendoChart().redraw();

不起作用，我认为图表名称未注册。

Answer 1

我对敲除剑道并不熟悉，一般来说对敲除剑道并不熟悉，因此，如果无法解决如下所述的明显问题，则可能需要refresh bindings。但是，this example并不是必需的，因此很可能您被一个简单的事实所吸引，即数组的remove执行简单的==比较，并且无法在数组中找到相等的对象。

这是一个简化的示例（尽管您可能已经知道了，但以防万一）：

var a="abc";
var b="abc";
var aa = [1,2,3,"a","b","c"];
var data1 = {name: a, data: aa};
var data2 = {name: b, data: aa};

现在，比较a==b返回true，显然data插槽是相同的，但是data1==data2是false。那是因为它是一个不同的对象。

因此，在您的示例中，在removeItem中创建并传递了一个要删除的新对象，而不是数组中的对象，因此==比较失败，并且由于该新创建的对象不在您的可观察数组中，因此未删除任何内容。

我建议比较与observable arrays上的基因敲除.js文档中的item.age < 18比较相似的名称：

this.seriesConfig.remove( function (item) { return item.name == "Diastolic"; } )

我相信，这应该可以解决问题。

淘汰赛-Kendo图表-删除和添加系列

1 个答案: