Question

我在cshtml页面上定义了一个Kendo Chart，如下所示：

@(Html.Kendo().Chart<MyModel>()
        .Name("chart")
        .Title("")
        .Legend(legend => legend
            .Visible(false)
        )
        .Series(series =>
         {
                    series.Scatter(model => model.X, model => model.Y);
                    series.Scatter(model => model.X, model => model.Y);
        })
        )

我需要使用JQuery调用设置每个系列的数据。我的JQuery调用和返回数据工作正常，下面将填充第一个系列数据：

 function GetChartData(ex,ten) {
            var str = "{'arg': '" + ex + "', 'arg2': '" + ten ' }";
            $.ajax({
                type: 'POST',
                url: '/Controller/CreateChartData',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: str ,
                success: function (data) {

                    var grid = $("#chart").data("kendoChart");
                    grid.dataSource.data(data.ChartData);
                    grid.refresh();

                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });

但是，我无法设置第二个系列数据。我尝试过以下在图表上没有任何内容的内容：

 function GetChartData(ex,ten) {
            var str = "{'arg': '" + ex + "', 'arg2': '" + ten ' }";
            $.ajax({
                type: 'POST',
                url: '/Controller/CreateChartData',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: str ,
                success: function (data) {

                    var grid = $("#chart").data("kendoChart");
            grid.options.series[0].data = data.ChartData;
           grid.options.series[1].data = data.ChartDataSeries2; 

                    grid.refresh();

                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                }
            });

Answer 1

您可能会尝试的方法是在获得所有数据之前不要初始化该图表。

这样就可以将两个系列传递给.kendoChart（）方法而不是调用refresh（）

function GetChartData(ex,ten) {
        var str = "{'arg': '" + ex + "', 'arg2': '" + ten ' }";
        $.ajax({
            type: 'POST',
            url: '/Controller/CreateChartData',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: str ,
            success: function (data) {

                 $("#chart").kendoChart({
                    theme: $(document).data("kendoSkin") || "default",
                    title: {
                        text: "Example"
                    },
                    legend: {
                        visible: true
                    },
                    seriesDefaults: {
                        type: "scatterLine"
                    },
                    series: [{
                        name: "series1",
                        data: data.ChartData
                    }, {
                        name: "series2",
                        data: data.ChartDataSeries2
                    }, {
                        name: "series3",
                        data: data.ChartDataSeries3
                    }]
                });
            }

            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });

使用aspx示例页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GraphTest.aspx.cs" Inherits="GraphTest" %>

<link rel="stylesheet" href="/css/kendo.common.min.css" />
<link rel="stylesheet" href="/css/kendo.metro.min.css" />
<link rel="stylesheet" href="/css/kendo.kendo.min.css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>        window.jQuery || document.write('<script src="/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<script src="/js/libs/kendo.all.min.js" type="text/javascript"></script>
<title></title>

    <div id="example" class="k-content">
        <div class="chart-wrapper">
            <div id="chart"></div>
        </div>
        <script>
            function createChart() {

                var data1 = [[10, 10], [15, 20], [20, 25], [32, 40], [43, 50], [55, 60], [60, 70], [70, 80], [90, 100]];

                $("#chart").kendoChart({
                    theme: $(document).data("kendoSkin") || "default",
                    title: {
                        text: "Charge current vs. charge time"
                    },
                    legend: {
                        visible: true
                    },
                    seriesDefaults: {
                        type: "scatterLine"
                    },
                    series: [{
                        name: "0.8C",
                        data: data1
                    }, {
                        name: "1.6C",
                        data: [[10, 40], [17, 50], [18, 70], [35, 90], [47, 95], [60, 100]]
                    }, {
                        name: "3.1C",
                        data: [[10, 70], [13, 90], [25, 100]]
                    }],
                    xAxis: {
                        max: 90,
                        labels: {
                            format: "{0}m"
                        },
                        title: {
                            text: "Time"
                        }
                    },
                    yAxis: {
                        max: 100,
                        labels: {
                            format: "{0}%"
                        },
                        title: {
                            text: "Charge"
                        }
                    },
                    tooltip: {
                        visible: true,
                        format: "{1}% in {0} minutes"
                    }
                });
            }

            $(document).ready(function () {
                setTimeout(function () {
                    // Initialize the chart with a delay to make sure
                    // the initial animation is visible
                    createChart();

                    $("#example").bind("kendo:skinChange", function (e) {
                        createChart();
                    });
                }, 400);
            });
        </script>
    </div>


</div>
</form>

通过JQuery为Kendo图表设置多个图表系列数据源

1 个答案: