Можно ли динамически менять всплывающую подсказку на диаграммах с3? - PullRequest
Новая
       30

Можно ли динамически менять всплывающую подсказку на диаграммах с3?

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

Когда вы генерируете диаграмму c3, вы можете определить множество свойств, в том числе и всплывающую подсказку, как показано здесь: 

generateData = () => {
  const x = randomNR(0, 100);
  const y = randomNR(0, 100);
  const together = x + y;

  return {
    data: {
      columns: [
        ['data1', x],
        ['data2', y],
      ],
      type: 'donut',
    },
    tooltip: {
      format: {
        value: function() {
          return `${x} + ${y} = ${together}`
        }
      }
    },
    donut: {
      title: `Tooltip not getting updated`
    }
  }
};

Однако, когда диаграмма сгенерирована, мы можем загрузить тольконовое свойство данных.Мне было интересно, возможно ли обновить всплывающую подсказку?Вот мой случай (это только для иллюстрации): https://plnkr.co/edit/8PrbjVqhS9BBYpSbZmkM?p=preview

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

1 Ответ

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

Попробуйте что-нибудь подобное?

function randomNR(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function f() {
  let x;
  let y;
  let together;
  return () => {
    x = randomNR(0, 100);
    y = randomNR(0, 100);
    together = x + y;
    return {
      data: {
        columns: [
          ['data1', x],
          ['data2', y],
        ],
        type: 'donut',
      },
      tooltip: {
        format: {
          value: function() {
            return `${x} + ${y} = ${together}`
          }
        }
      },
      donut: {
        title: `Tooltip not getting updated`
      }
    }
  };
}

const myGen = f();

const chart = c3.generate({
  bindto: '#chart',
  ...myGen()
});

setTimeout(function() {
  // HOW TO UPDATE THE TOOLTIP HERE?
  chart.load(myGen().data);
}, 2500);
...