我正在尝试将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})
。