代码之家 › 专栏 › 技术社区 › OpenStack

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

kendo-react-ui kendo-chart kendo-ui-angular2 kendo-ui

OpenStack · 技术社区 · 6 年前

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

对于EX: 当我在美国上空盘旋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>

1 回复 | 直到 6 年前

Joel 6 年前

你需要设置 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]) #`}

更改的数组索引 cityData[index] 选择一个国家的城市。

即

0: USA
1: Canada 
2: Mexico

更新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]

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

更新:

更新2:

待续…