asp.net-mvc - 将 Morris.js 与 reactjs 结合使用

Question

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

Answer 1

以下是让 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 的编译错误，请阅读 this .

如果你写 import Morris from 'morris.js/morris.js' ，它不会工作。

还有另一种方法可以让 Raphael 处于全局范围内。

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

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

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