Kendo UI散点图分组

时间:2013-08-09 21:57:56

标签: kendo-ui

我是Kendo和JavaScript的新手,并且在分散图表正确分组方面遇到了问题。图表确实呈现,只是没有分组。

以下是我获得的数据示例:

            "GradeLevel": "12",
            "StudentCount": 7,
            "StudentRiskFactor": 5.18
        },
        {
            "GradeLevel": "12",
            "StudentCount": 10,
            "StudentRiskFactor": 5.18
        },
        {
            "GradeLevel": "9",
            "StudentCount": 1,
            "StudentRiskFactor": 5.18
        },
        {
            "GradeLevel": "9",
            "StudentCount": 2,
            "StudentRiskFactor": 5.18
        },
        {
            "GradeLevel": "9",
            "StudentCount": 3,
            "StudentRiskFactor": 5.18

以下是我用来创建图表的代码:

    kcSchoolCrosstab = $("#SchoolCrosstab").kendoChart({
        title: {
            text: "Crosstab",
            font: "bold 16px Arial,Helvetica,Sans-Serif"
        },
        legend: {
            visible: false
        },
        dataSource: {

            transport: {

                read: function (options) {
                    if (!(ktvSchoolFilter && ktvSchoolFilter.getSelectedSchoolCodes() && getSelectedSchoolYear())) {
                        options.success([]);
                        return;
                    }
                    kendo.ui.progress(kcSchoolCrosstab.element, true);

                    $.getJSON(Helpers.toServicesUrl("/GetEWSSchoolCountVsRiskScore"),

                    {

                   username: WSIPCContext.UserName,
                   districtId: WSIPCContext.DistrictId,
                   schoolCodes: ktvSchoolFilter.getSelectedSchoolCodes(),
                   schoolYear: getSelectedSchoolYear,
                   //                      countOfEvents: 3,
                   countOfEvents: getRiskCatCount(),
                   whereIds: "1"
               }).success(function (data) {
                   options.success([]);
                   kcSchoolCrosstab.dataSource.data(data.GetEWSSchoolCountVsRiskScoreResult.RootResults);
               }).always(function () {
                   kendo.ui.progress(kcSchoolCrosstab.element, false);
               });
                },
                group: {
                    field: "GradeLevel"
                },

                sort: {
                    field: "StudentCount"
                },

                schema: {
                    data: "GetEWSSchoolCountVsRiskScoreResult.RootResults"
                }

            }

        },

        series: [{
            type: "scatter",
            xField: "StudentRiskFactor",
            yField: 'StudentCount',
            color: "#4F82BE"             
            name: "#= group.value"
        }],

        legend: {
            position: "bottom"
        },

        xAxis: {
            labels: {
                step: 2,
                format: "{0}%"
            },
            title: {
                text: "Avg. School Risk Score",
                font: "bold 12px  Arial,Helvetica,sans-serif"
            } ,
            majorGridLines: {
                color: "#C0C0C0"
            },

            minorGridlines: {
                color: "#C0C0C0"
            }

        },

        valueAxis: [{

            majorGridLines: {
                color: "#C0C0C0"
            },

            minorGridlines: {
                color: "#C0C0C0"
            }

        }],

        categoryAxis: [{

            majorGridLines: {
                color: "#C0C0C0"
            },

            minorGridlines: {
                color: "#C0C0C0"
            }

        }],

        yAxis: {
            labels: {
                skip: 2,
                step: 2
            },

            title: {
                text: "Avg. School Count",
                font: "bold 12px  Arial,Helvetica,sans-serif",
                margin: {
                    right: 10
                } 
            }

        chartArea: {
            height: 300,
            width: 500
        }
    }).data("kendoChart");
        },

任何帮助将不胜感激!感谢。

1 个答案:

答案 0 :(得分:0)

我很确定股票图表不支持x / y(即散点图)数据 - 如果你查看文档(http://docs.kendoui.com/api/dataviz/stock-chart),有类别和值轴配置参数,但没有对于x轴和y轴。