Pregunta

Tengo una colección de objetos con datos que deben mostrarse como gráficos dinámicos de kendo.Estoy usando la biblioteca Knockout-Kendo de Niemeyer con una matriz observable KO.Utilizo un valor relativo para representar los datos en el gráfico de kendo, pero necesito mostrar el valor de texto real asociado con los datos.Kendo tiene un atributo de plantilla que puede lograr esto, pero me encontré con un obstáculo para que funcione en la biblioteca Knockout-Kendo.

Violín
Aquí está un violín funcional con datos

Meta
Utilice un valor de búsqueda para mostrarlo en ValueAxis y ToolTip del gráfico.

Referencias
Documentos de plantilla de etiqueta de Kendo
Kendo Chart con una función para ejemplo de etiqueta
Documentos de la tabla de Knockout-Kendo de Niemeyer

Fragmento de datos

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 y enlaces de datos

<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>
¿Fue útil?

Solución

Tendría que exponer su función auxiliar globalmente, para que el código de la plantilla de Kendo pueda encontrarla.El código Fiddle JS se está ejecutando en el onload función, por lo que su getOptionText La función no es global.

Podrías hacer algo como:

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

Luego, use una plantilla como:'#=myApp.helpers.getOptionText(valor)#'

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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top