淘汰赛-剑道图表 - 删除和添加系列答案

【问题标题】：Knockout-Kendo Chart - remove and add series淘汰赛-剑道图表 - 删除和添加系列
【发布时间】：2018-08-23 06:26:38
【问题描述】：

我的项目是 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();

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

【问题讨论】：

标签： asp.net-mvc-4 knockout-kendo

【解决方案1】：

我不熟悉knockout-kendo，只是一般的knockout，所以如果按照下面描述的方法修复明显的问题不起作用，你可能需要refresh bindings。查看this example，但是这不是必需的，因此很可能您被一个简单的事实所抓住，即数组的删除执行简单的== 比较，并且无法在数组中找到相等的对象。

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

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 上的knockout.js 文档中的item.age < 18 比较类似：

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

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

【讨论】：