显示来自 Kendo UI 图表的详细信息 window

Question

我正在使用 Kendo UI MVC

@(Html.Kendo().Chart<Admin.Models.SiteActivityDaily>()
        .Name("chart")
        .Legend(l => l
           .Position(ChartLegendPosition.Bottom)
        )
        .Tooltip(true)
        .DataSource(ds => ds.Read(read => read.Action("GetSiteActivity", "Site")))
        .CategoryAxis(a => a
            .Categories(model => model.SiteDescription)
            .MajorGridLines(lines => lines.Visible(false))
        )
        .Series(series =>
        {
            series.Bar(d => d.ActivityCount).Name("Today");
        })

    )

是否可以在单击每个条形图时以某种方式显示带有详细信息的 Kendo Window，将变量 "SiteID" 传递给加载了 ajax 的部分视图？

Answer 1

您可以使用 kendo detailtemplate 但您想在 window 中显示详细信息。

因此，将详细信息模板包装在 kendo window 中。

http://demos.telerik.com/kendo-ui/grid/detailtemplate

Answer 2

您应该使用 plotAreaClick 事件来捕获点击值。参见 Docs

    <div id="chart"></div>
    <script>
      function chart_plotAreaClick(e) {
        console.log(e.value);
        //Here u open kendo window with value parameter
      }

      var chart = $("#chart").data("kendoChart");
      chart.bind("plotAreaClick", chart_plotAreaClick);
    </script>

Answer 3

您需要处理 SeriesClick event，然后将值传递给 Kendo Window。 Kendo Window执行的动作将return需要显示的局部视图

<script>
    function handleSeriesClick(e) {
        var wnd = $("#MyWindow").data("kendoWindow");
        wnd.refresh({
            url: "someUrl",
            data: { serieValue: e.value) }
        });
        wnd.bind("refresh", function () {
            wnd.center();
            wnd.open();
        });
    }
</script>

@(Html.Kendo().Chart<Admin.Models.SiteActivityDaily>()
    .Name("chart")
    .Legend(l => l
       .Position(ChartLegendPosition.Bottom)
    )
    .Tooltip(true)
    .DataSource(ds => ds.Read(read => read.Action("GetSiteActivity", "Site")))
    .CategoryAxis(a => a
        .Categories(model => model.SiteDescription)
        .MajorGridLines(lines => lines.Visible(false))
    )
    .Series(series =>
    {
        series.Bar(d => d.ActivityCount).Name("Today");
    })
    .Events(e => e.SeriesClick("handleSeriesClick"))
)

@(Html.Kendo().Window()
    .Name("MyWindow")
    .Visible(false)
)