如何将本地kendoUI散点图示例转换为远程数据源



我正在尝试将KendoUI散点图示例中的本地数据源示例转换为远程数据源。

如果我将数据放入JSON文件,然后使用指向该JSON文件的传输选项配置数据源,我可以看到它正在通过网络检索。但是图表上什么也没有显示。

我错过了什么?这是一个parameterMap问题吗?模式问题?有系列配置吗?

我在黑暗中,所以任何帮助都是非常感激的。:)

编辑:我不确定如何将JSON资源发布到jsfiddle,所以我只在这里显示代码位。

    <div kendo-chart k-options="scatter"  k-theme="'silver'" k-data-source="fakeData">
    </div>

上面是HTML部分。

 $scope.scatter ={
        title: {
            position: "top",
            text: "Rainfall - Wind Speed"
        },
        legend: {
            position: "bottom"
        },
        seriesDefaults: {
        type: "scatter"
        },
        xAxis: {
            max: 35,
            title: {
                text: "Wind Speed [km/h]"
            },
            crosshair: {
                visible: true,
                tooltip: {
                    visible: true,
                    format: "n1"
                }
            }
        },

        yAxis: {
            min: -5,
            max: 25,
            title: {
                text: "Rainfall [mm]"
            },
            axisCrossingValue: -5,
            crosshair: {
                visible: true,
                tooltip: {
                    visible: true,
                    format: "n1"
                }
            }
        }
    };
    $scope.fakeData = new kendo.data.DataSource({
        transport: {
            read:  "data/scatter-chart.json",
            type: "json"
        }
    });

以上是控制器代码。

[{"name": "January 2008";"数据":([16.4, 5.4],[21.7, 2],[25.4, 3],[19日2],[10.9,1],[13.6,3.2],[10.9,7.4],[10.9,0],[10.9,8.2],[16.4,0],[16.4,1.8],[13.6,0.3],[13.6,0],[29.9,0],[27.1,2.3],[16.4,0],[13.6,3.7],[10.9,5.2],[16.4,6.5],[10.9,0],[24.5,7.1],[10.9,0],[8.1,4.7],[19日0],[21.7,1.8],[27.1,0],[24.5,0],[27.1,0],[29.9,1.5],[27.1,0.8],[22.1,2]]}, {"名称":"2009年1月"数据":([6.4, 13.4],[1.7, 11],[5.4, 8],[9日17],[1.9,4],[3.6,12.2],[1.9,14.4],[1.9,9],[1.9,13.2],[1.4,7],[6.4,8.8],[3.6,4.3],[1.6,10],[9.9,2],[7.1,15],[1.4,0],[3.6,13.7],[1.9,15.2],[6.4,16.5],[0.9,10],[4.5,17.1],[10.9,10],[0.1,14.7],[9 10],[2.7,11.8],[2.1,10],[2.5,10],[27.1,10],[2.9,11.5],[7.1,10.8],[2.1,12]]}, {"name":"January 2010","数据":([21.7, 3],[13.6, 3.5],[13.6, 3],[29.9, 3],[21.7, 20],[19日2],[10.9,3],[28日,4],[27.1,0.3],[16.4,4],[13.6,0],[19日5],[16.4,3],[24.5,3],[32.6,3],[27.1,4],[13.6,6],[13.6,8],[13.6,5],[10.9,4],[16.4,0],[32.6,10.3],[21.7,20.8],[24.5,0.8],[16.4,0],[21.7,6.9],[13.6,7.7],[16.4,0],[8.1,0],[16.4,0],[16.4,0]]}]

以上是散点图中引用的JSON。JSON

注意:我已经成功地做了其他,更简单的剑道图表实现。因此假定所有Javascript和其他要求都是正确的。我在控制台上没有收到任何错误,并且可以检查检索到的数据对象。它根本不渲染。我相当确定有一些特殊的处理嵌套的"数据"数组,我没有正确初始化。

当与数据源一起使用时,Chart小部件似乎读取单个系列的数据。所以JSON文件应该是:

[ [16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2] ... ]

为了从远程服务获取多个序列,您必须首先读取它们,然后创建小部件,并将"series"配置选项设置为返回的数据。也可以在创建小部件后使用setOptions({series: data})

相关内容

  • 没有找到相关文章

最新更新