다소 간단한 누적 막대 차트가 있습니다. 이 바이올린 에서 볼 수 있습니다 . 내 시리즈는 다음과 같습니다.
"series" : [{
"name" : "HearingOfficer - Scheduling",
"color" : "",
"times" : ["Top Row Orange", "Bottom Row Orange"],
"data" : [126716, 107910]
}, {
"name" : "HearingOfficer - Uploading",
"color" : "",
"times" : ["Top Row Green", "Bottom Row Green"],
"data" : [10930, 106554]
}
],
지금은 TOP ORANGE 섹션 위로 마우스를 가져 가면라고 표시 Hearing Officer - Scheduling Top - Row Orange됩니다. TOP GREEN 섹션 위로 마우스를 가져 가면라고 표시 Hearing Officer - Uploading - Top Row Green됩니다.
Top Orange 섹션이 좋습니다. 그러나 Top Green은 Bottom Green을 말합니다. 맨 아래 행은 첫 번째 행의 툴팁을 복제합니다.
적절한 값을 올바르게 표시하는 방법이 있습니까? 내 현재 툴팁 템플릿은 다음과 같습니다.
"template" : "#= series.name #<br />#= series.times[series.index] #"
나는 series.index일을 발견했다고 생각 했지만 항상 0을 반환합니다.
I had to deal with the same problem a couple of weeks ago and I solved my problem by using dataSource instead of defining each series. It's implementation is a bit more complex but this will give you a lot of control over each element of the chart.
For instance, you'll be able to set all kind of custom values to a dataItem (including a text that could be used as a tooltip). Those values can be used from the tooltip template like this:
template: "#= dataItem.myCustomToolTip #"
EDIT
Here's a full example of the dataSource implementation. Please note that the dataSource is very picky when you deal with the Sort / Group. The dataSource will group correctly only if data is sorted in the expected order (in this example, it has to be sorted by category then by subCategory).
$("#chartBreakout").kendoChart({
title: { "text" : "Breakdown per Appeal" },
legend: { "visible" : false },
dataSource: {
data: [
{categoryOrder: 1, categoryName: "HearingOfficer - Scheduling", subCategoryOrder: 1, subCategoryName: "Orange", value: 126716},
{categoryOrder: 1, categoryName: "HearingOfficer - Scheduling", subCategoryOrder: 2, subCategoryName: "Green", value: 10930},
{categoryOrder: 2, categoryName: "HearingOfficer - Uploading", subCategoryOrder: 1, subCategoryName: "Orange", value: 107910},
{categoryOrder: 2, categoryName: "HearingOfficer - Uploading", subCategoryOrder: 2, subCategoryName: "Green", value: 106554}
],
group: {
field: "subCategoryOrder",
dir: "asc"
},
sort: [
{ field: "categoryOrder", dir: "asc" },
{ field: "subCategoryOrder", dir: "asc" }
]
},
seriesDefaults: {
type: "bar",
stack: { type: "normal" }
},
series: [{
type: "bar",
field: "value"
}],
valueAxis: {
line: { visible: false },
majorGridLines: {
visible: true
}
},
categoryAxis: {
field: "categoryName"
},
tooltip: {
visible: true,
template: "#= dataItem.categoryName# - #= dataItem.subCategoryName# : #= dataItem.value#"
}
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다