具有React的Chartjs：在带有竖线的图表之间切换

问题描述

我已经在我的React应用程序中创建了一个折线图，用户可以使用一些按钮在要在该图表上显示的不同数据之间进行切换。直到我决定在悬停上应用一条垂直线（显示工具提示）之前，这一切都很好。当第一个图表（默认为30d）呈现时，我没有问题，但是当我在不同的图表之间切换并将鼠标悬停在它们上并移动鼠标时，显示的图表会在不同的图表之间快速切换，就像鼠标悬停以某种方式执行一样determineTimeFormat()函数。

1. 图片：此处的图表显示了默认数据（30d），一切正常

1. 图片：在这里，我按下按钮并切换为显示所有数据。当我将鼠标移到图表上时，它将迅速更改显示的图表，如下图所示

   

2. 图片：此处的图表数据由于某些原因已更改

const CoinChart = ({ coinData }) => {
  const classes = useStyles();
  const chartRef = useRef();
  const [timeFormat,setTimeFormat] = useState('30d');
  const [activeButton,setActiveButton] = useState('30d');

  const { day,month,year,all,basicInfo } = coinData;

  const determineTimeFormat = () => {
    switch (timeFormat) {
      case '24h':
        return day;
      case '30d':
        return month;
      case '1y':
        return year;
      case 'All':
        return all;
      default:
        return day;
    }
  };

  const handleChartButtonClick = (e) => {
    setTimeFormat(e.target.value);
    setActiveButton(e.target.value);
  };

  const determineBorderColor = () => {
    const firstPrice = determineTimeFormat()[0]['y'];
    const lastPrice = determineTimeFormat()[determineTimeFormat().length - 1][
      'y'
    ];
    if (lastPrice >= firstPrice) {
      return globalStyles.profitColor.color;
    } else {
      return globalStyles.lossColor.color;
    }
  };

  useEffect(() => {
    if (chartRef && chartRef.current && basicInfo) {
      Chartjs.defaults.LineWithLine = Chartjs.defaults.line;
      Chartjs.controllers.LineWithLine = Chartjs.controllers.line.extend({
        draw: function (ease) {
          Chartjs.controllers.line.prototype.draw.call(this,ease);
          if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
            const activePoint = this.chart.tooltip._active[0],ctx = this.chart.ctx,x = activePoint.tooltipPosition().x,topY = this.chart.legend.bottom,bottomY = this.chart.chartArea.bottom;

            // draw line
            ctx.save();
            ctx.beginPath();
            ctx.moveto(x,topY);
            ctx.lineto(x,bottomY);
            ctx.linewidth = 2;
            ctx.strokeStyle = '#07C';
            ctx.stroke();
            ctx.restore();
          }
        },});
      var chartInstance = new Chartjs(chartRef.current,{
        type: 'LineWithLine',data: {
          datasets: [
            {
              label: 'Price',data: determineTimeFormat(),borderColor: determineBorderColor(),poinTradius: 0,fill: false,},],options: {
          lineHeightAnnotation: {
            always: true,hover: true,lineWeight: 1.5,animation: {
            duration: 1500,maintainAspectRatio: false,responsive: true,tooltips: {
            intersect: false,scales: {
            xAxes: [
              {
                type: 'time',distribution: 'linear',gridLines: {
                  display: false,});
    }
  },[timeFormat]);

  return (
    <div style={{ width: '100%' }}>
      <div className={classes.chartButtonsContainer}>
        <button
          type='button'
          className={classes.chartButton}
          disabled={activeButton === '24h' ? true : false}
          value='24h'
          onClick={handleChartButtonClick}
        >
          24h
        </button>
        <button
          type='button'
          className={classes.chartButton}
          disabled={activeButton === '30d' ? true : false}
          value='30d'
          onClick={handleChartButtonClick}
        >
          30d
        </button>
        <button
          type='button'
          className={classes.chartButton}
          disabled={activeButton === '1y' ? true : false}
          value='1y'
          onClick={handleChartButtonClick}
        >
          1y
        </button>
        <button
          type='button'
          className={classes.chartButton}
          disabled={activeButton === 'All' ? true : false}
          value='All'
          onClick={handleChartButtonClick}
        >
          All
        </button>
      </div>
      <div className={classes.chartInnerContainer}>
        <canvas ref={chartRef} id='history-chart'></canvas>
      </div>
    </div>
  );
};

export default CoinChart;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）