更新：

Question

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

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

这里是fiddle。

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

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

这是代码：

html {font-size：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

您需要设置#if __GNUC__ && !__clang__ #pragma GCC diagnostic error "-Walloc-size-larger-than=999999999L" #endif #if NDEBUG enum { ndebug=1}; #else enum { ndebug=0}; #endif #include <assert.h> #define ASAP_ASSERT(X) \ do{ \ /*if possible, statically assert it even without the optimizer*/ \ (void)(__builtin_constant_p(X) ? sizeof(int[(X)?1:-1]) : 0); \ _Bool ASAP_ASSERT=(X); /*prevent double evaluation*/ \ if(!ndebug){ \ /*try to make the optimizer raise a -Walloc-size-larger-than=*/ \ _Bool volatile ASAP_ASSERT__[(ASAP_ASSERT)?1:-1]; \ ASAP_ASSERT__[0]=0; \ (void)ASAP_ASSERT__; \ } \ assert(ASAP_ASSERT); /*if all static assert attempts fail, do it dynamically*/ \ }while(0) typedef enum { A = 0, B, C } enumerator1; typedef struct { enumerator1 a; unsigned char foo; unsigned char bar; } structure1; const structure1 array1[3] = { {A, 1, 1}, //This element should contain A {C, 1, 1}, //This element should contain B {B, 1, 1} //This element should contain C }; #include <stdlib.h> int main() { ASAP_ASSERT(array1[0].a!=A); //will cause a comptime failure on gcc when compiled with at least -O1 }，它会起作用，我也在下面包括了tooltip: { shared: true }的其他可自定义属性。

正在运行的演示：https://dojo.telerik.com/OfeMiHUb/4

摘要：

tooltip

，或者如果您想要工具提示的另一个模板，也可以尝试以下方法：https://dojo.telerik.com/OfeMiHUb/3

更新：

发生了什么变化？：

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

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

您可以通过索引子对象的键来检索城市数据，例如：tooltip: { template: `USA- #= cityData[0] .children .map(itm => Object.keys(itm)[0]) #` }

可能的补充：

如果希望将series.name动态添加到工具提示中，而不是显式键入它，则可以使用：cityData[0].children.map(itm => Object.keys(itm)[0])。

像这样：

series.name

更改tooltip: { template: `#= series.name # - #= cityData[0] .children .map(itm => Object.keys(itm)[0]) #`}的ArrayIndex以选择一个国家的城市。

即

cityData[index]

更新2：

通读了您写的内容（3000x）+看到图像后，我解释您还希望显示百分比（即使在下面的澄清注释中您还不知道？）。无论如何：

0: USA
1: Canada 
2: Mexico

几乎每个系列的百分比都有效。

现在，我正努力在此选择器中提取系列索引：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] } ],

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

1 个答案:

更新：

更新2：

待续...