将 Morris.js 与 reactjs 一起使用

Question

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

Answer 1

简单的解决方案

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

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

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

如果你想更新/重绘你的图表，你可以在点击按钮时调用yourChart.setData(newData)。

Answer 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 的编译错误，请阅读this。

2. 如果你写import Morris from 'morris.js/morris.js'，那就不行了。

3. 还有另一种方法可以让 Raphael 在全球范围内。

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

如果您更喜欢此变体，则不需要：

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