Формат Легенда в Кендо Chart MVC - PullRequest
Новая
       17

Формат Легенда в Кендо Chart MVC

0 голосов
/ 15 марта 2019

Я создаю диаграмму, где легенда отображается, как показано на рисунке ниже.

enter image description here

но я хочу это в виде строки, как на картинке ниже.

enter image description here

Ниже приведен мой код для генерации диаграммы. 

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

1 Ответ

0 голосов
/ 18 марта 2019

Дизайн маркера легенды зависит от версии css, которую вы используете в своем проекте. Насколько я понимаю, предыдущие версии (Пример 2016.3.914) используют квадратный маркер. Это было изменено в последней версии (Пример 2016.3.914) на строку.

Тем не менее, вы можете использовать эту демо , чтобы изменить значок маркеров легенды.

Для маркеров строки вы можете использовать фрагмент кода ниже: - 

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