在劍道圖示例中設置來自數據源的劍道圖系列名稱

Question

我從數據源中讀取連續線值，並靜態設置串聯名稱（例如「系列名稱」）。現在我正在尋找一種方法來動態設置系列名稱，以符合我從數據庫中讀取的數據。 這裏是我的代碼：

@(Html.Kendo().Chart() 
      .Name("Chart") 
      .Title("Chart Title") 
      .DataSource(ds=>ds.Read(read=>.read.Action("GetValues", "Controller"))) 
      .Series(series=>series.Line(model=>model.Value).Name("Series Name")) 
    ) 

Answer 1

使用Scatterline圖表連同GroupNameTemplate能有所幫助，以動態地設置圖表系列的名稱。像波紋管的代碼片段：從Telerik的管理員在Telerik的論壇

<%= Html.Kendo().Chart(Model) 
    .Name("chart") 
    .Title("Stock Prices") 
    .DataSource(dataSource => dataSource 
     .Read(read => read.Action("_StockData", "Scatter_Charts")) 
     .Group(group => group.Add(model => model.Symbol)) 
     .Sort(sort => sort.Add(model => model.Date).Ascending()) 
    ) 
    .Series(series => 
    { 
     series.ScatterLine(model => model.Date, model => model.Close) 
      .Name("close") 
      .GroupNameTemplate("#= group.value # (#= series.name #)"); 
    }) 
    .Legend(legend => legend 
     .Position(ChartLegendPosition.Bottom) 
    ) 
    .YAxis(axis => axis.Numeric() 
     .Labels(labels => labels 
      .Format("${0}") 
      .Skip(2) 
      .Step(2) 
     ) 
    ) 
    .XAxis(axis => axis.Date() 
     .Labels(labels => labels.Format("MMM")) 
    ) 
%> 

Answer 2

答：

@(Html.Kendo().Chart<ChartDynamicBinding.Models.ViewModel>() 
     .Name("Chart3") 
     .Title("Test") 
     .DataSource(dataSource => 
       dataSource.Read(read => read.Action("Series", "Home")) 
       .Group(g=> g.Add(v=> v.Series)) 
       .Sort(s=> s.Add(v=> v.Date)) 
     ) 
     .Legend(legend => legend 
      .Position(ChartLegendPosition.Bottom) 
     ).ChartArea(chartArea => chartArea 
        .Background("transparent") 
     ) 
     .SeriesDefaults(seriesDefaults => 
      seriesDefaults.Line().Style(ChartLineStyle.Smooth) 
     ) 
     .Series(series => 
     { 
      series.Line(value => value.Hitcount, category => category.Date).Name("#:group.value#").Labels(labels => labels.Visible(true).Color("Red")).Color("Blue");             
     }) 
     .CategoryAxis(axis => axis 
       .Labels(labels => labels.Rotation(-65) 
      ) 
     )      
     .ValueAxis(axis => axis 
      .Numeric().Labels(labels => labels.Format("{0}")) 
      .Line(line => line.Visible(false)) 
      .AxisCrossingValue(-10) 
     ) 
     .Tooltip(tooltip => tooltip 
      .Visible(true) 
      .Format("{0}") 
     ) 
) 

鏈接：

• Permalink
• Source Code