带有KendoUI图表的KnockoutJS组件仅适用于最后一个图表

时间:2015-09-25 18:59:53

标签: javascript knockout.js kendo-ui

我有一个Observable项目数组,用于创建带参数的组件。

在每个组件中,我使用该参数来查询数据(通过AJAX)。我将该数据返回到一个Observable Array,并将该Array用作KendoUI图表的数据源。

带参数的已创建组件列表示例:

<csglist params="account:'08167526'"></csglist>
<hr>
<csglist params="account:'0873458'"></csglist>
<hr>
<csglist params="account:'0828337'"></csglist>
<hr>
<csglist params="account:'086778'"></csglist>

调用获取数据

        getCategory = function () {
            self.categoryChart([]);
            xhr_get(cont.publish + 'api/dbmain/getCategory', { 'id': params.account }).done(function (allData) {
                var mappedLogs = $.map(allData, function (item) { return new categoryData(item) });
                self.categoryChart(mappedLogs);
                buildChart();
            })
        }
function buildchart(){

    $(document).ready(createChart);
    $(document).bind("kendo:skinChange", createChart);
}

创建图表

 function createChart() {    
      $("#" + self.act() + "chart").kendoChart({
        dataSource: {
          data: ko.toJS(self.categoryChart)
            //, sort: { field: "category", dir: "asc" }
        },
        title: {
          text: self.type()
        },
        legend: {
          visible: true,
          position: "bottom"
        },
        seriesDefaults: {
          type: "bar",
          stack: true
        },
        series: [{
          field: "sales",
          name: "Current Sales",
          color: "#66110F"
        }, {
          field: "opp",
          name: "Opportunity",
          color: "#E65F5B"
        }],
        valueAxis: {
          //   max: 180,
          line: {
            visible: false
          },
          minorGridLines: {
            visible: true
          },
          visible: false
        },
        categoryAxis: {
          field: "category",
          majorGridLines: {
            visible: false
          }
        },
        tooltip: {
          visible: false,
          template: "#= series.name #: #= value #"
        }
      });
    }

但是当组件全部创建时,只有最后一个组件有数据。

有谁能告诉我为什么会这样?

1 个答案:

答案 0 :(得分:0)

当我将buildChart =函数更改为self.buildChart = function时,它可以工作!