我有一组对象,其中包含需要显示为动态kendo图表的数据。我正在使用Niemeyer的Knockout-Kendo图书馆和KO observablearray。我使用相对值将数据绘制到剑道图表上,但我需要显示与数据相关联的实际文本值。 Kendo有一个模板属性可以实现这个目标,但我遇到了一个障碍,使它在Knockout-Kendo库中运行。
小提琴
这是带有数据的a functioning Fiddle
目标
使用查找值在图表的ValueAxis和ToolTip中显示
参考
Kendo Label Template docs
Kendo Chart with a function for label example
Niemeyer Knockout-Kendo Chart docs
数据摘录
var theData =[{
"TrackerName": "Fruits",
"Trackers": [{
"TrackerName": "Fruits",
"TrackerDate": "2014-02-12T00:00:00",
"OptionText": "5-7 servings",
"RelativeValue": 3
},
{
"TrackerName": "Fruits",
"TrackerDate": "2014-02-13T00:00:00",
"OptionText": "5-7 servings",
"RelativeValue": 3
},
etc];
HTML和数据绑定
<div data-bind="foreach:AllTrackers">
<h3 data-bind="text:TrackerName"> </h3>
<!-- ko with: Trackers -->
<div data-bind="kendoChart:
{
data: $data,
chartArea: {
height:100
},
series: [
{
type: 'line',
style:'smooth',
field: 'RelativeValue',
markers: {
visible: true,
background: '#c0c0c0',
size: 10
},
tooltip: {
visible: true,
background: '#f0f0f0'
}
}],
seriesColors: ['midnightblue'],
valueAxis: {
labels: {
template: 'Help #=value#'
},
line: {
visible: false
},
min: 1,
max: 4,
majorUnit: 1
}
,
categoryAxis: {
categories:$parent.CategoryDates,
majorGridLines: {
visible: false
}
}
}">
</div>
<!-- /ko -->
</div>
答案 0 :(得分:0)
您必须全局公开您的帮助程序函数,以便Kendo模板代码可以找到它。小提琴JS代码在onload
函数中运行,因此getOptionText
函数不是全局函数。
您可以执行以下操作:
window.myApp = {
helpers: {
getOptionText: function(q ){
//these are not the real values, but you get the idea
if(q===1){
return 'Bare minimum';
}
if (q ===2){
return 'Some effort ';
}
if (q ===3){
return 'Good ';
}
if (q ===4){
return 'Great ';
}
}
}
};
然后,使用如下模板:'#= myApp.helpers.getOptionText(value)#'