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.

Top Orange 部分不错。但是顶部绿色说底部绿色。底行重复第一行的工具提示。

有没有办法正确显示适当的值。我当前的工具提示模板是：

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

我以为我注意到 series.index 有效，但它总是 returns 0.

Answer 1

几周前我不得不处理同样的问题，我通过使用数据源而不是定义每个系列解决了我的问题。它的实现有点复杂，但这会让您对图表的每个元素有很多控制。

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

template: "#= dataItem.myCustomToolTip #"

编辑

这是数据源实现的 full example。请注意，当您处理 Sort / Group 时，数据源非常挑剔。仅当数据按预期顺序排序时，数据源才会正确分组（在此示例中，它必须先按类别排序，然后按子类别排序）。

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

KendoUI 堆积条形图自定义工具提示

KendoUI Stacked Bar Chart Custom Tooltip

javascript

kendo-ui