使用Morris.js与reactjs

Question

如何使用reactjs创建morris.js图表？我正在使用带有Asp.net库的MVC5项目。这是我的第一个反应项目，当某个按钮单击时，我想更改一个morris.js图表。我不想使用其他react库，只想使用react脚本中的morris js librayr

Answer 1

下面是如何使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的编译错误，请阅读this。
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;

Answer 2

简单解

在componentDidMount()中，绘制图表，在我的例子中，它是一个甜甜圈：

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

其中yourChart是在类之外声明的，或者您可以在constructor()中执行this.yourChart。

如果要更新/重新绘制图表，可以在单击按钮时调用yourChart.setData(newData)。