在 Kendo Chart MVC 中格式化图例答案

【问题标题】：Format Legend in Kendo Chart MVC在 Kendo Chart MVC 中格式化图例
【发布时间】：2019-03-15 11:41:01
【问题描述】：

我正在生成图例，如下图所示。

但我希望这条线如下图所示。

下面是我生成图表的代码。

<div class="k-content wide">

@(Html.Kendo().Chart(Model)
    //.RenderAs(RenderingMode.Canvas)
    .Name("chartHistory" + this.ViewData["ID"])
    .HtmlAttributes(new { style = "width: 380px; height: 200px;", @class = "company-img" })
    .Title(title =>
        title.Text(this.ViewData["Title"].ToString())
        .Color("#264D82")
        .Font("bold 14px Arial,Helvetica,sans-serif")
        .Margin(0).Padding(0)
    )
    .Legend(legend => legend.Position(ChartLegendPosition.Bottom).Margin(0).Padding(0)
    )
    .ChartArea(chartArea => chartArea
        .Background("transparent")
        .Margin(0, 5, 0, 5)
    )
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("PriceHistory", "Charts", new { companyID = this.ViewData["ID"] }))
        .Sort(sort => sort.Add(model => model.Date).Ascending())
        //.Group(group => group.Add<string>(model => model.Name))
        )
    .SeriesDefaults(seriesDefaults =>
        seriesDefaults.ScatterLine().Markers(markers => markers.Size(0)).Width(2)
    )
    .Series(series =>
    {
        series.ScatterLine(model => model.Date, model => model.MarketPrice)
            .Name((this.ViewData["CompareToIndexName"] == null) ? "Market Price" : this.ViewData["CompareToIndexName"].ToString())
             .YAxis("MarketPrice");
            series.ScatterLine(model => model.Date, model => model.Price).Name(this.ViewData["Company"].ToString())
        .Markers(markers => markers.Size(0)).Width(4);

    })
    .SeriesColors("#264D82", "#000000") // or green #34A645
    .XAxis(x => x
        .Date().Labels(labels => labels.Format("{0:MMM yy}"))
        .BaseUnit(ChartAxisBaseUnit.Months)
        .MajorGridLines(lines => lines.Visible(false))
        // Align MarketPrice axis to the right by specifying
        // a crossing value greater than or equal to the axis maximum.
        .AxisCrossingValue(DateTime.Now.AddMonths(-12), DateTime.MaxValue)
    )
    .YAxis(axis => axis
        .Numeric().Labels(labels => labels.Format("{0}"))
        .Line(line => line.Visible(true))
        .AxisCrossingValue(0)
        .MajorTicks(tick => tick.Size(6).Visible(true))
    )
    .YAxis(axis => axis
      .Numeric("MarketPrice")
    .Labels(labels => labels.Step(2)).Visible(false)
    )
    .Tooltip(tooltip => tooltip
        .Format("{1:0.#} ({0:MMM yy})")
        .Visible(true)
    )
    .Events(events => events
        .Render("onRender")
    )
)

【问题讨论】：

标签： asp.net asp.net-mvc kendo-chart

【解决方案1】：

图例标记设计取决于您在项目中使用的 css 版本。据我了解，以前的版本（示例 2016.3.914）使用方形标记。这已在最新版本（示例 2016.3.914）中更改为一行。

但是，您可以使用此demo 来更改图例标记的图标。

对于线标记，您可以使用下面的代码 sn-p：-

    var marker = new kendo.drawing.Path({
            stroke: {
              color: color,
              dashType: "solid",
              width: 2
            }
          }).moveTo(0, 0).lineTo(10, 0).close();

【讨论】：