asp.net-mvc - 使用 MVC 动态地使用 Kendo UI 图表标题

Question

如何使用 MVC Controller 中的数据动态更改 x 轴和 y 轴的标题？

Index.cshtml 看起来像这样，

<div class="chart-wrapper">
@(Html.Kendo().Chart(Model)
    .Name("chart")
    .Title("Price-Performance Ratio")
    .Legend(legend => legend
        .Visible(true)
        .Position(ChartLegendPosition.Bottom)
    )
    .Series(series =>
    {
        series.Scatter(model => model.Price, model => model.Performance)
            .Name("Price Performance");
    })
    .XAxis(x => x
        .Numeric()
        .Title(title => title.Text("Price"))
        .Labels(labels => labels.Format("R{0}")).Max(30)
    )
    .YAxis(y => y
        .Numeric()
        .Title(title => title.Text("Performance Ratio"))
        .Labels(labels => labels.Format("{0}%")).Max(10)
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= '<b>$' + value.x + ' / ' + dataItem.Family + ' ' + dataItem.Model + ': ' + value.y + '%</b>' #")
    )
    .ChartArea( size => size.Height(520))
)

主 Controller 中的索引操作如下所示

var model = new List<PricePerformance>(){
       new PricePerformance(){
            Price = 14.4,
            Performance = 5.4
      },
      new PricePerformance(){
            Price = 21.4,
            Performance = 2
      },
      new PricePerformance(){
            Price = 8.4,
            Performance = 1.4
      }
};

return View(model);

模型看起来像这样

public class PricePerformance
{
     public double Price { get; set; }
     public double Performance { get; set; }
     public string LabelX { 
        get { return "Price"; } 
    }
    public string LabelY {
        get { return "Performance";} 
    }
}

Answer 1

创建一个 ViewModel PricePerformanceViewModel 并将 LabelX 和 LabelY 移至其中。创建 PricePerformance 列表。

    public class PricePerformanceViewModel
    {
        public List<PricePerformance> PricePerformances { get; set; }
        public string LabelX
        {
            get { return "Price"; }
        }
        public string LabelY
        {
            get { return "Performance"; }
        }
    }

    public class PricePerformance
    {
        public double Price { get; set; }
        public double Performance { get; set; }
    }

更改您的 View 如下。

    @model PricePerformanceViewModel                      //Change Model
    <div class="chart-wrapper">
    @(Html.Kendo().Chart(Model.PricePerformances)         //Change Model
        .Name("chart")
        .Title("Price-Performance Ratio")
        .Legend(legend => legend
            .Visible(true)
            .Position(ChartLegendPosition.Bottom)
        )
        .Series(series =>
        {
            series.Scatter(model => model.Price, model => model.Performance)
                .Name("Price Performance");
        })
        .XAxis(x => x
            .Numeric()
            .Title(title => title.Text(Model.LabelX))        //Change Title
            .Labels(labels => labels.Format("R{0}")).Max(30)
        )
        .YAxis(y => y
            .Numeric()
            .Title(title => title.Text(Model.LabelY))        //Change Title
            .Labels(labels => labels.Format("{0}%")).Max(10)
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template("#= '<b>$' + value.x + ' / ' + dataItem.Family + ' ' + dataItem.Model + ': ' + value.y + '%</b>' #")
        )
        .ChartArea( size => size.Height(520))
    )