一个剑术堆积条形图中添加工具提示每一瓦片

Question

我已创建使用剑道UI堆积条形图。我要显示工具提示在堆积条形图每个区块，并使用另一个数组用于此目的，其包含要被显示为工具提示的值。

对于例如：当我悬停，美国2000年，提示应显示，纽约市：60％SFO：40％（如图片所示）。

这里是一个fiddle。

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

问题是，当我使用series click或series hover events，我不能够识别瓦片（堆积条形图内），其使得难以显示工具提示。

这是代码：

• HTML {字体大小：14px的; FONT-FAMILY：宋体，黑体，无衬线; }

     <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

UPDATE:

是什么改变了？：

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]) #`}

更改cityData[index]的ArrayIndex选择一个国家的城市。

即

0: USA
1: Canada 
2: Mexico

UPDATE 2:

通过你写的文章看完后（3000倍）+看图像，我解释，美也希望百分比显示（即使寿，好像在下面，美不澄清评论？）。无论如何：

        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]

TO BE CONTINUED...