2014-02-27 7 views
1

데이터가있는 개체 모음이 동적 검도 차트로 표시되어야합니다. KO observablearray와 함께 Niemeyer의 Knockout-Kendo 라이브러리를 사용하고 있습니다. 상대 값을 사용하여 검도 차트에 데이터를 차트로 표시하지만 데이터와 관련된 실제 텍스트 값을 표시해야합니다. Kendo는이를 수행 할 수있는 템플릿 속성을 가지고 있지만 Knockout-Kendo 라이브러리에서 작동하게하는로드 블록을 쳤습니다. 바이올린
Knockout-Kendo 차트의 동적 계열 범례

여기에 데이터

목표
를 사용하여 차트의 ValueAxis 및 도구 설명에 표시하기 위해 조회 값이

참조
Kendo Label Template docsa functioning Fiddle입니다
Kendo Chart with a function for label example
Niemeyer Knockout-Kendo Chart 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> 

답변

0

당신은 세계적으로 도우미 기능을 노출해야합니다 그래서 검도 주형 코드에서 찾을 수 있습니다. 피들 JS 코드는 onload 함수에서 실행 중이므로 getOptionText 함수는 전역 적이 지 않습니다.

당신은 같은 것을 할 수있는 '# = myApp.helpers.getOptionText (값) #'속임수를 썼는지

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

+0

: 다음

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

을, 같은 템플릿을 사용한다. 고마워, 라이언! – HeimerTown