Как я могу увидеть текущий элемент, который представляет бар, к которому применяется зависание - PullRequest
Новая
       33

Как я могу увидеть текущий элемент, который представляет бар, к которому применяется зависание

2 голосов
/ 07 октября 2019

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

enter image description here

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

С этим: 

tooltip: {

        contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
            console.log(d, defaultTitleFormat, defaultValueFormat, color);
            return "fds";
}

это мой живой код: 

var query = [
    ["x", "Usuarios"],
    ["Berta Arroyave", 53],
    ["Rogelio Zuluaga", 52],
    ["Manrique Perez", 42],
    ["Justin Vargas", 33],
    ["Believer qw", 28],
    ["María Jimenez", 14],
    ["Nairo Quintan", 12],
    ["Adriana Cardona", 11],
    ["Departamento Idio", 9],
    ["Natalia Benjumea", 7],
    ["Bibliotecatos", 7],
    ["Jose Herrera", 7],
    ["Doralibia", 6],
    ["Secretaría General  ", 6],
    ["Natalia Ochoa", 6],
    ["Viviana Cano", 5],
    ["Erika Valencia", 5],
    ["Sandra Cañon", 3],
    ["Lina Constanza Suaza", 3],
    ["Recepción User", 2],
    ["Facultad Medicina  ", 2],
    ["Sandra Valencia", 2],
    ["Luz Sepulveda", 2],
    ["Heidy Zapata", 2],
    ["Gabriela García", 2],
    ["Auxiliar Administrativo", 2],
    ["Adriana Mejia", 2],
    ["Administrador", 1],
    ["Nathaly", 1]
  ]

  c3.generate({
    data: {
      x: 'x',
      columns: query,

      type: 'bar'
    },
    axis: {
      x: {
        type: 'category' // this needed to load string x value
      }
    }
 });

как я могу это сделать?

https://jsfiddle.net/50uej3at/

1 Ответ

0 голосов
/ 09 октября 2019

Я думаю, что ваша проблема здесь в том, что ваши данные имеют неправильный формат, к которому вы стремитесь ... вместо того, чтобы иметь одну запись на категорию, у вас есть одна категория со всем как запись внутри нее .. .

Если вы поставите эту строку после определения данных запроса: 

query = d3.transpose(query);

Вы должны получить один столбец на человека и без массивных всплывающих подсказок

https://jsfiddle.net/yta1s9cz/1/

(я также отрегулировал поворот метки оси, чтобы сделать метки читабельными)

...