데이터가있는 개체 모음이 동적 검도 차트로 표시되어야합니다. KO observablearray와 함께 Niemeyer의 Knockout-Kendo 라이브러리를 사용하고 있습니다. 상대 값을 사용하여 검도 차트에 데이터를 차트로 표시하지만 데이터와 관련된 실제 텍스트 값을 표시해야합니다. Kendo는이를 수행 할 수있는 템플릿 속성을 가지고 있지만 Knockout-Kendo 라이브러리에서 작동하게하는로드 블록을 쳤습니다. 바이올린
Knockout-Kendo 차트의 동적 계열 범례
여기에 데이터
목표
를 사용하여 차트의 ValueAxis 및 도구 설명에 표시하기 위해 조회 값이
참조
Kendo Label Template docs와 a 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>
: 다음
을, 같은 템플릿을 사용한다. 고마워, 라이언! – HeimerTown