Использование Morris.js с реагировать
Как я могу использовать responsejs для создания диаграммы morris.js? Я использую проект Asp.net MVC5 с библиотекой act.js. Это мой первый проект реакции, и я хочу изменить диаграмму morris.js, когда какая-то кнопка нажата. Я не хочу использовать другую реагирующую библиотеку, просто morris js librayr внутри реагирующего скрипта js
2 ответа
Вот как вы можете заставить Morris.js работать с React.
- Установите Morris.js и его зависимость - Raphael.js:
npm install --save-dev morris.js
npm install --save-dev raphael
- В вашем компоненте:
import Raphael from 'raphael';
import 'morris.js/morris.css';
import 'morris.js/morris.js';
- Моррис ищет Рафаэля в глобальном масштабе
constructor() {
super();
window.Raphael = Raphael;
}
Важные заметки
Если вы получили ошибку компиляции для
morris.css
Пожалуйста, прочитайте это.Если ты пишешь
import Morris from 'morris.js/morris.js'
это не сработает.Есть еще один способ сделать Рафаэля глобальным.
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)
по нажатию кнопки.