Question

我有一个带有几个图表和下拉列表的仪表板。我希望能够根据所选项目刷新所有图表中的数据。每个图表看起来像：

<div class="sparkline-container">
  @(Html.Kendo().Chart<DemoCash.Web.Models.KPIViewModel>()
    .Name("CashUtil")
    .Theme("default")
    .HtmlAttributes(new { @style = "height: 150px;" })
    .SeriesColors(new string[] { "#ff6800", "#c20000" })
    .Legend(legend => legend.Visible(false))
    .ChartArea(chartArea => chartArea.Background("transparent"))
    .Events(e => e.DataBound("onCashUtilDataBound"))
    .DataSource(ds => ds.Read(read => read.Action("CashUtilByBranch", "Dashboard")))
    .Series(series => {series.Donut("CashUtilization","BranchId").Padding(0);})
    .Tooltip(tooltip => tooltip.Visible(true)
      .Template("#= dataItem.BranchName #: #=dataItem.CashUtilization # %")
    )
  )
  <div id="CashUtilizationNoData" class="overlay">
    <div></div>
  </div>
 </div>

虽然下拉列表是：

  <div id="brnfilter">
    @(Html.Kendo().DropDownList()
      .Name("cbobrnfilter")
      .DataTextField("BranchName")
      .DataValueField("BranchId")
      .HtmlAttributes(new { @style = "width:250px" })
      .DataSource( 
        datasource => {datasource.Read(read =>{read.Action("GetRegionBranches", "Branch");})
        .ServerFiltering(true);})
    )
 </div>

页面上还有其他图表类型。

Answer 1

您可以尝试将javascript事件侦听器功能添加到下拉列表中。例如：

Html.Kendo().DropDownList()
.Events(e => { e.Cascade("someJsFunction"); })
.Name("cbobrnfilter")...

查看其他剑道下拉事件here。然后在您的js函数someJsFunction中根据所选值更改数据源并刷新图表：

$('#CashUtil').data().kendoChart.dataSource.read();
$('#CashUtil').data().kendoChart.refresh();

根据所选项目更改页面数据

1 个答案: