剑道图MVC中的格式图例

Question

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

但我希望这个像下面的图像一样。

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

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

Answer 1

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

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

对于行标记，您可以使用下面的代码段： -

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