Использование Morris.js с реагировать

Как я могу использовать responsejs для создания диаграммы morris.js? Я использую проект Asp.net MVC5 с библиотекой act.js. Это мой первый проект реакции, и я хочу изменить диаграмму morris.js, когда какая-то кнопка нажата. Я не хочу использовать другую реагирующую библиотеку, просто morris js librayr внутри реагирующего скрипта js

2 ответа

Решение

Вот как вы можете заставить Morris.js работать с React.

  1. Установите Morris.js и его зависимость - Raphael.js:
npm install --save-dev morris.js
npm install --save-dev raphael
  1. В вашем компоненте:
import Raphael from 'raphael';
import 'morris.js/morris.css';
import 'morris.js/morris.js';
  1. Моррис ищет Рафаэля в глобальном масштабе
constructor() {
    super();
    window.Raphael = Raphael;
}

Важные заметки

  1. Если вы получили ошибку компиляции для morris.cssПожалуйста, прочитайте это.

  2. Если ты пишешь import Morris from 'morris.js/morris.js'это не сработает.

  3. Есть еще один способ сделать Рафаэля глобальным.

const webpack = require('webpack');
module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            Raphael: 'raphael'
        })
    ],
    ...
}

Если вы предпочитаете этот вариант, вам не нужно:

import Raphael from 'raphael';
window.Raphael = Raphael;

Простое решение

В componentDidMount() нарисуйте свой график, в моем примере это пончик:

yourChart = Morris.Donut({ element: 'elementId', data: data, // ...other options });

где yourChart объявлен вне класса или вы можете сделать this.yourChart в constructor(),

Если вы хотите обновить / перерисовать свой график, вы можете позвонить yourChart.setData(newData) по нажатию кнопки.

Другие вопросы по тегам