剑道下拉不起作用？

Question

我正在为我的图表使用Kendo dragdrop。对于某些图表，我使用不同的方法来显示图表，这很好。

<div id="ExertiveHeartRate" class="chartContainer"></div>
<div id="BloodPressure" class="chartContainer"></div>



        $.ajax({
            type: "GET",
            url: createURL("AverageHeartRate", period1, period2, "<% = Session["id"] %>"),
            dataType: "json",
            contentType: "application/json; chartset=utf-8",
            async:"false",
            success: function (chartData) {


                $(container).kendoChart({

                    dataSource: {
                        data: chartData
                    },

                    seriesColors: ["orangered"],

                    chartArea: {
                        background: ""
                    },

                    title: {
                        text: title,
                    },
                    legend: {
                        visible: false
                    },

                    seriesDefaults: {
                        type: "column",
                        gap: .5,
                        overlay: {
                            gradient: "none"
                        }
                    },
                    series: [{
                        field: "heartrate"                             
                    }],

                    categoryAxis: {
                        type: "date",
                        field: "createddate"                         
                    },
                    valueAxis: {
                        title: {
                            text: "Exertive HeartRate",
                            font: "14px Arial,Helvetica,sans-serif"
                        }
                    }
                });
            }
        });

如果我按上面创建图表。拖放将无法正常工作。如果我使用下面的代码，它的工作正常

var dSource = getJsonData("BloodPressure", period1, period2, "<% = Session["id"] %>");


        $(container).kendoChart({

            dataSource: dSource,

            seriesColors: ["#002EB8"],
            title: {
                text: title,
                font: "14px Arial,Helvetica,sans-serif bold",
                color: "#002EB8"
            },

            chartArea: {
                background: ""
            },

            legend: {
                visible: false
            },

            chartArea: {
                background: ""
            },

            seriesDefaults: {
                type:"column",
                gap: .5,
                overlay: {
                    gradient: "none"
                }
            },
            series: [
            {
                name: "diastolic",
                field: "diastolic",
                categoryField: "createddate",
                aggregate: "avg",
                tooltip: {
                    visible: true
            }],

            categoryAxis: {
                type: "date"
                },
                majorGridLines: {
                    visible: false
                },
                majorTicks: {
                    visible: false
                }
            }
        });

执行dragdrop的代码如下：

        $(".chartContainer").kendoDraggable({
            hint: function (e) {
                debugger;

                $("#" + e[0].id).addClass("dragStyle");
                return e.clone();
            },
            dragstart: function (e) {

                debugger;

                e.currentTarget.hide();
            },
            dragend: function (e) {
                if (!e.currentTarget.data("kendoDraggable").dropped) {
                    $("#" + e.currentTarget[0].id).addClass("dropStyle");
                }
                e.currentTarget.show();
            }
        });

        $(".chartContainer").kendoDropTarget({
            drop: function (e) {
                $("#" + e.draggable.element[0].id).addClass("dropStyle");
                $("#" + e.draggable.element[0].id).insertBefore("#" + e.dropTarget[0].id);
            }
        });

$ .ajax（）函数有阻止拖放的东西

Answer 1

$(container)是一个糟糕的jquery选择器。它应该更像是$('#container')。

此外，您可能还想等到kendo的拖放功能，直到图表制作完毕。所以在ajax函数的成功函数结束时。

---

你也可以采取另一种方法。您首先不需要数据来制作图表。只需声明您的图表正常。然后，您可以在加载后将数据传入图表。

$.ajax({
  url:...,
  dataType:'json',
  success: function(d){
   $('#container').data('kendoChart').dataSource.data(d);
  }
});

您可能希望在等待时显示加载图像。