向 kendo 堆叠条形图中的每个图块添加工具提示

Question

我使用 Kendo UI 创建了堆积条形图。我想为堆叠条形图中的每个图块显示工具提示，并为此使用另一个数组，其中包含要显示为工具提示的值。

例如： 当我将鼠标悬停在 2000 年的美国时，工具提示应显示 NYC：60% 和 SFO：40%（如图所示）。

这里是fiddle。

这就是我要实现的目标（在本例中显示的是美国 2000 年的工具提示）：

问题是当我使用 series click 或 series hover events 时，我无法识别图块（在堆叠条形图中），这使得显示工具提示变得更加困难。

这是代码：

html { 字体大小：14px；字体系列：Arial、Helvetica、sans-serif； }

   <script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
   <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>

     var CityData = [{country: "USA", children:[{"NYC": ["60%", "70%", "80%"]}, {"SFO": ["40%", "30%", "20%"]}]},

                     {country: "Mexico", children:[{"Mexico City": ["80%", "80%", "80%"]}, {"Cancun": ["20%", "20%", "20%"]}]},


                        {country: "Canada", children:[{"Toronto": ["50%", "60%", "60%"]}, {"Vancouver": ["50%",

"40%", "40%"]}]}

                         ];

       function createChart() {


           $("#chart").kendoChart({
               title: {
                   text: "City data"
               },
               legend: {
                   visible: false
               },
               seriesDefaults: {
                   type: "column",
                   stack: {
                       type: "100%"
                   }
               },
               series: [{
                   name: "USA",
                   stack: {
                       group: "Country"
                   },
                   data: [854622, 925844, 984930]
               }, {
                   name: "Canada",
                   stack: {
                       group: "Country"
                   },
                   data: [490550, 555695, 627763]
               }, {
                   name: "Mexico",
                   stack: {
                       group: "Country"
                   },
                   data: [379788, 411217, 447201]
               }

                ],
               seriesColors: ["yellow", "green", "red"],
               valueAxis: {
                   line: {
                       visible: false
                   }
               },
               categoryAxis: {
                   categories: [2000, 2005, 2010],
                   majorGridLines: {
                       visible: false
                   }
               },
               tooltip: {
                   visible: true,
                   template: "#= series.stack.group #, city #= series.name #"
               }
           });
       }

       $(document).ready(createChart);
       $(document).bind("kendo:skinChange", createChart);
   </script>

Answer 1

您需要设置 tooltip: { shared: true } 它会起作用，我还在下面包含了 tooltip 的其他可自定义属性。

工作演示：https://dojo.telerik.com/OfeMiHUb/4

片段：

 tooltip: {
             shared: true,
             visible: true,
             background: "#000",
             template: "#= series.stack.group #, city #= series.name #"
          }

或者如果你想要工具提示的另一个模板，你可以试试这个：https://dojo.telerik.com/OfeMiHUb/3

更新：

发生了什么变化？：

tooltip: { 
     template: `USA- #= cityData[0]
                            .children
                                 .map(itm => Object.keys(itm)[0]) #`
    }

OP 进一步阐明了他想要什么，作为 per 新信息，请参阅新的工作示例：https://dojo.telerik.com/OfeMiHUb/9

您可以像这样通过索引子对象的键来检索您的城市数据：cityData[0].children.map(itm => Object.keys(itm)[0])

可能的补充：

如果您希望将 series.name 动态添加到工具提示中，而不是显式键入它。您可以使用：series.name。

像这样：

tooltip: { 
   template: `#= series.name # - #=
   cityData[0]
       .children
           .map(itm => Object.keys(itm)[0]) #`}

将 cityData[index] 的 ArrayIndex 更改为 select 个国家城市。

即

0: USA
1: Canada 
2: Mexico

更新 2：

看完你写的内容 (3000x) + 查看图片后，我的解释是你也想要百分比显示（即使在下面的澄清评论中你不想要？）。总之：

        series: [{
            name: "USA",
            stack: {
                group: "Country"
            },
            tooltip: {template: `#= series.name # - #=
            cityData[0]
                .children
                    .map(itm => '[' + Object.keys(itm)[0] + ']' + ' : ' + Object.values(itm)[0][0]) #`},
            data: [854622, 925844, 984930]
        }, {
            name: "Canada",
            stack: {
                group: "Country"
            },
            tooltip: {template: `#= series.name # - #=
            cityData[1]
                .children
                    .map(itm => '[' + Object.keys(itm)[0] + ']' + ' : ' + Object.values(itm)[0][0]) #`},
            data: [490550, 555695, 627763]
        }, {
            name: "Mexico",
            stack: {
                group: "Country"
            },
                            tooltip: {template: `#= series.name # - #=
            cityData[2]
                .children
                    .map(itm => '[' + Object.keys(itm)[0] + ']' + ' : ' + Object.values(itm)[0][0]) #`},
            data:[379788, 411217, 447201]
        }

         ],

几乎得到百分比/系列工作。

现在我正在努力提取这个 select 中的系列索引或：Object.values(itm)[0][SERIES_INDEX_SHOULD_BE_HERE]

向 kendo 堆叠条形图中的每个图块添加工具提示

Adding tooltip to each tile in a kendo stacked bar chart

kendo-ui

kendo-chart

kendo-ui-angular2

kendo-react-ui

更新：

更新 2：

待续...