第一次通话后,Kendo Series Click事件无效

时间:2018-05-14 14:31:11

标签: kendo-ui

我在js文件中有一个Kendo Pie图表,它有一个onSeriesClick函数:

function pieChartForInterventions(chartID, pieChartData, seriesClickCallback) {

chartID.kendoChart({
    dataSource: {
        data: pieChartData
    },
    series: [{
        type: "pie",
        color: "#FDB45C",
        animation: {
            type: "fadeIn",
            duration: 100
        },
        field: "list",
        categoryField: "mm",
        padding: 0,
        labels: {
            visible: true,
        },
        overlay: {
            gradient: "none"
        },
    }],
    seriesColors: ["#46BFBD", "lightskyblue"],

    tooltip: {
        visible: true,
        template: "${ category }"
    }
    ,
    legend: {
        position: "bottom"
    },
    seriesClick: seriesClickCallback
});

}

我提供数据,并在饼图中创建了一个饼图,当我点击它时应该给我一个网格和另一个图表(列),当只有网格时,它可以工作,当我想要网格和柱形图,seriesClick事件在第一次调用后不起作用,对于网格和柱形图我有两个不同的功能, 这是我的柱形图:

                 function createChartForInterventions(dataForInter) {


             chartID.kendoChart({ 
              legend: {
                visible: false
                      },   
                series: [{
                data:dataForInter,
                type: "column",
                color: "#FDB45C",
                field: "cp_type_present",
                categoryField: "turbineName",
               }],


       });

        });

这是我的网格:

        function createDynamicGrid(chartId, source, column) {

                chartId.kendoGrid({
                dataSource: {
                    data: source,
                },
                height: 350,
                scrollable: true,
                sortable: true,
                filterable: true,
                columns: column,
                noRecords: {
                    template: "No data"
                },

                });

        }       

在我的主视图中,我称之为:

               $.ajax({

                  dataType: "json",
                  type: "POST",
                  url: "@Url.Action("faultstatCrewPresentIntervetion","Dashbrd")",
                  contentType: "application/json; charset=utf-8",
                      data: JSON.stringify({ "dtFrom": dtDrpVals.fromDate, "dtTo": dtDrpVals.toDate }),

                          success: function (result) {

                      var _clicked;

                           function onDb(e) {            
                    createDynamicGrid($("#gridProAvail"), result.interInprog, clmns);
                   createChartForInterventions();
                  ];


          }
             //Pie Chart 
                     pieChartForInterventions($("#pieChart"), result.nbr_ofCPtype, onDb);
           }});

1 个答案:

答案 0 :(得分:0)

尝试将您的活动改为:

function pieChartForInterventions(chartID, pieChartData, seriesClickCallback) {

    chartID.kendoChart({
        dataSource: {
            data: pieChartData
        },
        series: [{
            type: "pie",
            color: "#FDB45C",
            animation: {
                type: "fadeIn",
                duration: 100
            },
            field: "list",
            categoryField: "mm",
            padding: 0,
            labels: {
                visible: true,
            },
            overlay: {
                gradient: "none"
            },
        }],
        seriesColors: ["#46BFBD", "lightskyblue"],

        tooltip: {
            visible: true,
            template: "${ category }"
        }
        ,
        legend: {
            position: "bottom"
        },
        .Events(events => events
                .SeriesClick("seriesClickCallback")
        )
    });

    }

https://demos.telerik.com/aspnet-mvc/chart-api/events