4

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

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

4

1 回答 1

0

我对knockout-kendo不熟悉，只是一般的knockout，所以如果修复如下所述的明显问题不起作用，您可能需要刷新绑定。看这个例子，但是这不是必需的，所以很可能你被一个简单的事实抓住了，数组的 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 示例中，您创建并传递了一个要删除的新对象，而不是数组中的那个，因此==比较失败并且没有任何内容被删除，因为新创建的对象不在您的可观察数组中。

我建议仅将名称与可观察数组item.age < 18上的 knockout.js 文档中的比较类似：

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

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

于 2018-08-29T05:53:30.060 回答