Telerik MVC Chart - привязка к JSON - PullRequest
Новая
       17

Telerik MVC Chart - привязка к JSON

0 голосов
/ 11 октября 2018

Как связать Telerik ASP.Net MVC Chart (не Kendo для версии jQuery) с JSON?Например, я хотел бы связать следующую диаграмму (Примечание: ряды пока заглушены фиктивными данными, но, надеюсь, вы поняли) к функции JavaScript, которая возвращает JSON .У меня проблемы с поиском примера того, как это сделать с помощью Telerik ASP.Net MVC Chart.Я нахожу примеры с пользовательским интерфейсом Kendo для диаграммы jQuery - но я этим не пользуюсь. 

@(Html.Kendo().Chart()
.Name("GallonsPerMonth")
.Title("Total Gallons Per Month")
.Legend(legend => legend
    .Position(ChartLegendPosition.Top)
    .Visible(true)
)
.Theme("Bootstrap")
.ChartArea(chartArea => chartArea
    .Background("transparent")
    .Height(600)
)
.Series(series =>
{
    series.Column(new double[] { 825, 775, 875, 900, 925, 1111, 1200, 1175, 1100, 1000, 875, 800 }).Name("Estimated");
    series.Line(new double[] { 700, 795, 900, 850, 950, 905, 1175, 1100, 1000, 1050, 700, 650 }).Name("Actual").Color("red");

})
.CategoryAxis(axis => axis
    .Name("series-axis")
    .Line(line => line.Visible(false))
)
.CategoryAxis(axis => axis
    .Name("label-axis")
    .Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sep", "Oct", "Nov", "Dec")
)
.ValueAxis(axis => axis//.Logarithmic()
    .Numeric()
    .Labels(labels => labels.Format("{0}"))

    // Move the label-axis all the way down the value axis
    .AxisCrossingValue(0, int.MinValue)
)
.Tooltip(tooltip => tooltip
    .Visible(true)
    .Format("{0}")
    .Template("#= series.name #: #= value #")
)

)

dsd

1 Ответ

0 голосов
/ 11 октября 2018

Вы можете создать диаграмму, используя вспомогательное расширение MVC без данных серии, поэтому добавьте это, используя JavaScript, когда документ будет готов. 

<script>
    $(document).ready(function () {
        $.getJSON('your-url', function (data) {
            var chart = $("#GallonsPerMonth").data("kendoChart");
            var series = chart.options.series;
            // first series
            series[0].data = data;
            chart.redraw();
        });
    }
</script>

Примечание. Я добавляю данные в кулакСерия.

...