Показывать дату вместе с данными во всплывающей подсказке (реакция) - PullRequest
Новая
       8

Показывать дату вместе с данными во всплывающей подсказке (реакция)

0 голосов
/ 30 ноября 2018

Я использую линейный график, чтобы показать пользователям последние транзакции, и я хочу отображать дату транзакции ниже суммы.В настоящее время у меня все работает, как и ожидалось (кроме всплывающей подсказки с датой), и передаю массив объектов, содержащих свойства: время (t) и остаток / сумма (у). 

{
   y: 100,
   t: 1541973
}

Myконфигурация для графика выглядит так (имейте в виду, что я использую react-chartjs-2, который является оболочкой для реагирования, поэтому он может выглядеть немного иначе: 

const data = (canvas) => {
  const ctx = canvas.getContext('2d');
  let gradient = ctx.createRadialGradient(width, 0, height * 2, width, 0, 0);
  gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
  gradient.addColorStop(0.5, 'rgba(230, 230, 230, 0.28)');
  gradient.addColorStop(1, 'rgba(255, 255, 255, 1)');
  let borderGradient = ctx.createLinearGradient(150, 0, width, 0);
  borderGradient.addColorStop(0, `rgba(255, 255, 255, ${ 0.11 * q })`);
  borderGradient.addColorStop(0.33, 'rgba(255, 255, 255, 0)');
  borderGradient.addColorStop(0.66, `rgba(255, 255, 255, ${ q })`);
  borderGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
  if (isMobile) {
    gradient = ctx.createRadialGradient(width / 2, -height, 0, width / 2, -height, height * 2.1);
    gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
    gradient.addColorStop(0.5, 'rgba(230, 230, 230, 0.28)');
    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
    borderGradient = ctx.createLinearGradient(0, 0, width * 1.2, 0);
    borderGradient.addColorStop(0, `rgba(255, 255, 255, ${ 0.11 * q })`);
    borderGradient.addColorStop(0.06, 'rgba(255, 255, 255, 0)');
    borderGradient.addColorStop(0.35, `rgba(255, 255, 255, ${ q })`);
    borderGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
  }
  return {
    labels: Array(7),
    datasets: [{
      label: 'Balance',
      data: chartData,
      backgroundColor: gradient,
      borderWidth: 1,
      borderColor: borderGradient,
    }],
  };
};
const options = {
  responsive: false,
  title: false,
  legend: {
    display: false,
  },
  tooltips: {
    mode: 'index',
    intersect: false,
  },
  elements: {
    point: false,
    rectangle: {
      backgroundColor: '#000',
    },
  },
  scales: {
    xAxes: [{
      display: false,
    }],
    yAxes: [{
      display: false,
      ticks: {
        beginAtZero: true,
      },
    }],
  },
};

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

Любая помощь очень ценится:)

...