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