Legenda della serie dinamica nella tabella Knockout-Kendo

Question

Ho una raccolta di oggetti con dati che devono essere visualizzati come grafici di kendo dinamici.Sto utilizzando la libreria Knockout-Kendo di Niemeyer con un array osservabile KO.Utilizzo un valore relativo per tracciare i dati sul grafico kendo, ma devo visualizzare il valore di testo effettivo associato ai dati.Kendo ha un attributo modello che può raggiungere questo obiettivo, ma ho riscontrato un ostacolo nel farlo funzionare nella libreria Knockout-Kendo.

Violino
Ecco un violino funzionante con i dati

Obiettivo
Utilizzare un valore di ricerca da visualizzare in ValueAxis e ToolTip del grafico

Riferimenti
Documenti sul modello di etichetta Kendo
Grafico Kendo con una funzione per l'esempio dell'etichetta
Documenti della tabella Niemeyer Knockout-Kendo

Frammento di dati

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 e associazioni di dati

<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>

Answer 1

Dovresti esporre la tua funzione di supporto a livello globale, in modo che il codice del modello Kendo possa trovarla.Il codice JS di violino è in esecuzione nel file onload funzione, quindi il tuo getOptionText la funzione non è globale.

Potresti fare qualcosa del tipo:

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 ';
            }
        }
    }
};

Quindi, utilizza un modello come:'#=myApp.helpers.getOptionText(valore)#'

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