chartjs-plugin-zoom не работает с моим проектом React

У меня есть компонент React, использующий библиотеку react-chartjs-2 для отображения некоторых данных. График с данными работает нормально. Чего я не могу сделать, так это заставить диаграмму работать с плагином chartjs-plugin-zoom. Я не уверен, что не так с конфигом. Я использую:

реагировать-диаграммаjs-2: ^ 3.0.3

chartjs-plugin-zoom: ^ 1.0.1

import { Line } from 'react-chartjs-2'
import * as zoom from 'chartjs-plugin-zoom'

import classes from './Chart.module.css'

interface Chart {
  title: string
  labels: string[]
  datasets: any
}

const Chart: React.FC<Chart> = props => {
  const data = {
    title: props.title,
    labels: props.labels,
    datasets: props.datasets,
  }

  const options = {
    maintainAspectRatio: false,
    responsive: true,
    elements: {
      point: {
        radius: 0,
      },
      line: {
        borderWidth: 1.5,
      },
    },
    scales: {
      x: {
        ticks: {
          color: 'rgba( 0, 0, 1)',
        },
        grid: {
          color: 'rgba(0, 0, 0, 1)',
        },
      },
      y: {
        min: 1,
        max: 200000,
        type: 'logarithmic',
        ticks: {
          color: 'rgba(0, 0, 0, 1)',
        },
        grid: {
          color: 'rgba(0, 0, 0, 1)',
        },
      },
    },
    plugins: {
      zoom: {
        zoom: {
          enabled: true,
          mode: 'xy',
          speed: 100,
        },
        pan: {
          enabled: true,
          mode: 'xy',
          speed: 100,
        },
      },
    },
  }

  return (
    <div className={classes.chartContainer}>
      <Line
        type='line'
        title={props.title}
        data={data}
        options={options}
        width={900}
        height={450}
      />
    </div>
  )
}

export default Chart

На всякий случай это файл css.

.chart-container {
  height: 450px;
  width: 900px;
}

Любые идеи?


reactjs javascript react-chartjs-2 chart.js chartjs-plugin-zoom
person matiasdiezcanseco    schedule 10.06.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

2, вам нужно будет зарегистрировать плагин масштабирования, как указано в документации, зарегистрировав его глобально или встроенно (https://www.chartjs.org/chartjs-plugin-zoom/guide/integration.html#bundlers-webpack-rollup-etc), также ваша конфигурация была неправильной, параметр масштабирования не имеет параметра enabled, вам нужно будет включить все различные типы масштабирования appart, тогда он будет работать (https://www.chartjs.org/chartjs-plugin-zoom/guide/options.html#zoom-options )

import { Line, Chart } from "react-chartjs-2";
import React from "react";
import zoomPlugin from "chartjs-plugin-zoom";

Chart.register(zoomPlugin); // REGISTER PLUGIN

const Chart2 = (props) => {
  const data = {
    title: props.title,
    labels: props.labels,
    datasets: props.datasets
  };

  const options = {
    maintainAspectRatio: false,
    responsive: true,
    elements: {
      point: {
        radius: 0
      },
      line: {
        borderWidth: 1.5
      }
    },
    scales: {
      x: {
        ticks: {
          color: "rgba( 0, 0, 1)"
        },
        grid: {
          color: "rgba(0, 0, 0, 1)"
        }
      },
      y: {
        min: 1,
        max: 200000,
        type: "logarithmic",
        ticks: {
          color: "rgba(0, 0, 0, 1)"
        },
        grid: {
          color: "rgba(0, 0, 0, 1)"
        }
      }
    },
    plugins: {
      zoom: {
        zoom: {
          wheel: {
            enabled: true // SET SCROOL ZOOM TO TRUE
          },
          mode: "xy",
          speed: 100
        },
        pan: {
          enabled: true,
          mode: "xy",
          speed: 100
        }
      }
    }
  };

  return (
    <div>
      <Line
        type="line"
        data={data}
        options={options}
        width={900}
        height={450}
      />
    </div>
  );
};

export default Chart2;

Ссылка Codesandbox: https://codesandbox.io/s/react-chart-js-forked-cn6wh?file=/src/components/Chart.js

person LeeLenalee    schedule 10.06.2021
comment
Спасибо, это то, чего мне не хватало. После этого у меня возникла вторая проблема. Мое приложение NextJS ссылалось на объект окна, который не существовал (из-за того, как работает рендеринг на стороне сервера). Я исправил это в этом сообщении. stackoverflow.com/a/57848309/16181400 Спасибо! - person matiasdiezcanseco; 10.06.2021