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

现在，当我将鼠标悬停在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。

Answer 1

几周前我不得不处理同样的问题，我通过使用dataSource而不是定义每个系列来解决我的问题。它的实现有点复杂，但这可以让你对图表的每个元素进行大量控制。

例如，您可以将所有类型的自定义值设置为dataItem（包括可用作工具提示的文本）。可以从工具提示模板中使用这些值，如下所示：

template: "#= dataItem.myCustomToolTip #"

修改

这是dataSource实现的full example。请注意，处理Sort / Group时，dataSource非常挑剔。仅当数据按预期顺序排序时，dataSource才会正确分组（在此示例中，必须按类别排序，然后按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#"
    }    
});