Knockout-Kendo图表中的动态系列传奇
-
23-12-2019 - |
题
我的集合是需要显示为动态kendo图表的数据。我正在使用Niemeyer的Knockout-Kendo Library,ko deamperalawarray。我使用相对值将数据图表到kendo图表上,但我需要显示与数据关联的实际文本值。 kendo有一个模板属性,可以实现这一点,但我遇到了一段障碍,使其在knockout-kendo库中工作。
小提琴
这里是一个功能小提琴带有数据
目标
在图表的ValueAxis和工具提示中使用查找值以显示
引用
kendo标签模板docs
kendo图表与标签示例的函数
niemeyer knockout-kendo图表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>
. 解决方案
您必须在全球范围内公开您的帮助函数,以便肯德模板代码可以找到它。Fiddle 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)#'
不隶属于 StackOverflow