Легенда динамической серии в таблице Knockout-Kendo
-
23-12-2019 - |
Вопрос
У меня есть коллекция объектов с данными, которые необходимо отображать в виде динамических диаграмм кендо.Я использую библиотеку Knockout-Kendo Нимейера с наблюдаемым массивом KO.Я использую относительное значение для отображения данных на диаграмме кендо, но мне нужно отобразить фактическое текстовое значение, связанное с данными.У Kendo есть атрибут шаблона, который может это сделать, но я столкнулся с препятствием, заставляющим его работать в библиотеке Knockout-Kendo.
скрипка
Вот функционирующая скрипка с данными
Цель
Используйте искомое значение для отображения в ValueAxis и ToolTip диаграммы.
Рекомендации
Документация по шаблону этикетки кендо
Таблица Кендо с функцией для примера метки
Документация по таблице нокаут-кендо Нимейера
Фрагмент данных
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>
Решение
Вам придется предоставить свою вспомогательную функцию глобально, чтобы код шаблона 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(значение)#'