Добавление всплывающей подсказки к каждой плитке в гистограмме с накоплением кендо - PullRequest
Новая
       54

Добавление всплывающей подсказки к каждой плитке в гистограмме с накоплением кендо

0 голосов
/ 11 февраля 2019

Я создал гистограмму с накоплением, используя Kendo UI.Я хочу показать всплывающую подсказку для каждой плитки в гистограмме с накоплением и использовать для этой цели другой массив, содержащий значения, которые будут отображаться в виде всплывающей подсказки.

Например: При наведении курсора на СШАдля 2000 года должна отображаться подсказка, NYC: 60% и SFO: 40% (как показано на рисунке).

Вот скрипка .

Это то, чего я пытаюсь добиться (в данном случае показывает подсказку для 2000 года для США): enter image description here

Проблема в том, что я использую series clickили series hover events, я не могу определить плитку (внутри гистограммы с накоплением), что затрудняет отображение всплывающей подсказки.

Это код:

  • html {font-size: 14px;семейство шрифтов: Arial, Helvetica, без засечек;} 

       <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 Ответ

0 голосов
/ 11 февраля 2019

Вам нужно установить 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]) #`
    }

ОП уточнил, что он хотел, так как за новую информацию, пожалуйста, посмотрите новый рабочий пример: https://dojo.telerik.com/OfeMiHUb/9

Вы можете получить данные о вашем городе с помощью индексации ключей дочернего объекта, например:this: 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]) #`}

Измените ArrayIndex на cityData[index], чтобы выбрать города наций.

т.е. 

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]

ПРОДОЛЖЕНИЕ БУДЕТ ...

...