问题
I have kendo chart as below. I have to plot the graph which has more than 20k points. The problem i am facing here is the chart is rendering very slow. How to improve the peformance of this. Any help on this is highly appreciated?
@(Html.Kendo().PanelBar()
.Name("linePanelBar")
//.ExpandMode(PanelBarExpandMode.Multiple)
.HtmlAttributes(new { style = "width:100%;height:300px;background-color:transparent;" })
.Items(panelbar =>
{
panelbar.Add().Text("Correlation")
.Expanded(true)
.Content(@<div onclick="onCell3Clicked()">
<div id="loading"></div>
@if (@Model != null && @Model.XValues != null && @Model.YValues != null)
{
@(Html.Kendo().Chart()
.Name("Correlationchart")
.RenderAs(RenderingMode.Canvas)
.Transitions(false)
.Title(Model.YString + " Vs " + Model.XString + " Relationship")
//.Legend(legend => legend
// .Position(ChartLegendPosition.Right).Visible(true)
//)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.ScatterLine().Style(ChartScatterLineStyle.Smooth)
)
.Series(series =>
{
series.Scatter(Model.CorrelationChartData).Fields("xValue", "yValue").NoteTextField("fallback").Notes(notes => notes.Label(label => label.Position(ChartNoteLabelPosition.Outside)).Position(ChartNotePosition.Top));
series.ScatterLine(Model.RegressionChartData).Fields("xValue", "yValue").Name("Regression");
series.ScatterLine(Model.LowessChartData).Fields("xValue", "yValue").Name("Lowess");
}).Events(e=>e.SelectStart("onSelectStart").SelectEnd("onSelectEnd"))
.ChartArea(x => x.Width(600).Height(300))
.XAxis(x => x
.Numeric()
.Title(title => title.Text(Model.XString))
.Crosshair(crosshair => crosshair
.Visible(true)
.Tooltip(tooltip => tooltip
.Visible(true)
)
)
)
.YAxis(y => y
.Numeric()
.Title(title => title.Text(Model.YString))
.AxisCrossingValue(-5)
.Crosshair(crosshair => crosshair
.Visible(true)
.Tooltip(tooltip => tooltip
.Visible(true)
)
)
)
)
}
</div>);
}))
Thanks
来源:https://stackoverflow.com/questions/34334829/kendo-chart-rendering-very-slow