kendo-ui - 为剑道堆叠条形图中的每个图块添加工具提示

Question

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

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

这是一个小提琴。

这就是我想要实现的目标（在这种情况下显示美国 2000 年的工具提示）：

问题是当我使用series clickor时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 进一步澄清了他想要什么，根据新信息，请参阅新的工作示例：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]) #`}

更改 ArrayIndexcityData[index]以选择国家城市。

IE

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

         ],

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

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

待续...