Легенда динамической серии в таблице Knockout-Kendo

У меня есть коллекция объектов с данными, которые необходимо отображать в виде динамических диаграмм кендо. Я использую библиотеку Knockout-Kendo Нимейера с наблюдаемым массивом KO. Я использую относительное значение для отображения данных на диаграмме кендо, но мне нужно отобразить фактическое текстовое значение, связанное с данными. У кендо есть атрибут шаблона, который может сделать это, но я столкнулся с препятствием, заставляющим его работать в библиотеке Knockout-Kendo.

Fiddle
Вот работающий скрипт с данными

Цель
Использовать значение поиска для отображения на оси значений и во всплывающей подсказке диаграммы

Ссылки
Документы по шаблону ярлыков кендо
Таблица кендо с функцией для примера
Таблица Нимейера Knockout-Kendo Chart

Фрагмент данных

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-ui knockout.js kendo-chart knockout-kendo
person HeimerTown    schedule 27.02.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно будет открыть свою вспомогательную функцию глобально, чтобы код шаблона 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)#'

http://jsfiddle.net/rniemeyer/X2WBL/

person RP Niemeyer    schedule 27.02.2014