KendoUI堆疊條形圖定製工具提示

Question

我有一個相當簡單的堆疊條形圖。你可以在fiddle看到它。我的系列如下：

"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] 
    } 
], 

現在，當我將鼠標懸停在頂部的橙色部分應該說Hearing Officer - Scheduling Top - Row Orange。當我將鼠標懸停在TOP GREEN部分上時，應該顯示Hearing Officer - Uploading - Top Row Green。

它的頂部橙色部分很好。但頂綠說底綠。底部行復制第一行的工具提示。

有沒有辦法正確顯示適當的值。我現在的提示模板：

"template" : "#= series.name #<br />#= series.times[series.index] #" 

我以爲我注意到series.index的工作，但它總是返回0

Answer 1

我不得不在幾個星期前處理同樣的問題，我通過使用DataSource，解決我的問題而不是定義每個系列。它的實現稍微複雜一點，但這會讓你對圖表的每個元素有很多控制。例如，您可以將所有類型的自定義值設置爲dataItem（包括可用作工具提示的文本）。這些值可以從提示模板中使用這樣的：

template: "#= dataItem.myCustomToolTip #" 

編輯

這裏的DataSource實現的full example。請注意，在處理Sort/Group時，dataSource非常挑剔。只有數據按預期順序排序（在本例中，必須按類別排序，然後按子類排序），dataSource才能正確分組。

$("#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#" 
    }  
});