[asp.net-mvc]动态使用 MVC 的剑道 UI 图表标题

发布时间: 2016/10/5 4:16:22
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

如何动态地更改标题的 x 和 y 轴动态与 MVC 控制器的数据?

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))
)

Homecontroller 中的索引操作看起来像这样

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";} 
    }
}

解决方法 1:

创建 ViewModel PricePerformanceViewModel 和移动 LabelXLabelY 这样创建目录 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; }
    }

你查看如下图所示的变化。

    @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))
    )
赞助商