Kendo UI多轴图表非内联数据源绑定异常求助

问题分析 #

核心问题在于：Kendo Chart的dataSource属性默认用于为单个系列提供数据点集合，而非加载包含系列类型、轴绑定、颜色等完整配置的多系列数组。直接将这类配置数组传入dataSource会导致图表无法正确解析数据，进而渲染失败。

解决方案 #

1. 本地数据绑定 #

无需使用dataSource，直接将本地系列数据赋值给图表的series配置项即可：

let seriesData = [
    {"type":"column","axis":"qty","color":"#3CA84B","name":"Quantity","data":[43]},
    {"type":"line","axis":"ratio","color":"#3279FD","name":"Ratio","data":[100]}
];

$("#pareto").kendoChart({
    title: {
        text: "Pareto chart"
    },
    legend: {
        position: "bottom"
    },
    series: seriesData, // 直接传入本地系列配置数组
    valueAxis: [
        {
            name: "qty",
            title: {text: "Quantity"},
            min: 0
        },
        {
            name: "ratio",
            min: 0,
            max: 100,
            title: {text: "Ratio"}
        }
    ],
    categoryAxis: {
        categories: ["Something"],
        axisCrossingValue: [0, 10]
    },
    tooltip: {
        visible: true,
        format: "N0"
    }
});

2. 远程数据绑定 #

通过Kendo DataSource或AJAX获取远程数据后，将数据赋值给图表的series配置项：

方式一：使用Kendo DataSource的fetch方法

const chartDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/order/paretochart/7",
            dataType: "json"
        }
    }
});

// 数据加载完成后初始化图表
chartDataSource.fetch(function() {
    const seriesData = this.data();
    $("#pareto").kendoChart({
        title: { text: "Pareto chart" },
        legend: { position: "bottom" },
        series: seriesData,
        valueAxis: [
            { name: "qty", title: {text: "Quantity"}, min: 0 },
            { name: "ratio", min: 0, max: 100, title: {text: "Ratio"} }
        ],
        categoryAxis: { categories: ["Something"], axisCrossingValue: [0, 10] },
        tooltip: { visible: true, format: "N0" }
    });
});

方式二：使用AJAX直接请求

$.ajax({
    url: "/order/paretochart/7",
    dataType: "json",
    success: function(seriesData) {
        $("#pareto").kendoChart({
            title: { text: "Pareto chart" },
            legend: { position: "bottom" },
            series: seriesData,
            valueAxis: [
                { name: "qty", title: {text: "Quantity"}, min: 0 },
                { name: "ratio", min: 0, max: 100, title: {text: "Ratio"} }
            ],
            categoryAxis: { categories: ["Something"], axisCrossingValue: [0, 10] },
            tooltip: { visible: true, format: "N0" }
        });
    },
    error: function() {
        console.error("远程数据加载失败");
    }
});

关键说明 #

Kendo Chart的dataSource属性设计初衷是为单个系列提供纯数据点（比如仅数值数组），而非包含系列完整配置的数组。当需要动态加载多系列的全量配置时，必须先获取数据，再将其直接赋值给图表的series选项，才能确保图表正确解析渲染。

内容的提问来源于stack exchange，提问作者Mark