在工具提示图表中显示日期和数据(反应)

时间:2018-11-30 14:32:31

标签: javascript reactjs chart.js react-chartjs

我正在使用折线图向用户显示最近的交易,并且我想在金额下方显示交易日期。目前,我可以按预期工作(日期工具提示除外),并且正在传递包含属性(时间(t)和余额/金额(y))的对象数组。

{
   y: 100,
   t: 1541973
}

我对图形的配置看起来像这样(请记住,我使用react-chartjs-2这是react的包装器,因此可能看起来有些不同:

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值下方显示日期。

非常感谢您的帮助:)

0 个答案:

没有答案