将 Morris.js 与 reactjs 一起使用

Question

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

Answer 1

简单的解决方案

在componentDidMount()中画出你的图表，在我的例子中它是一个甜甜圈：

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

其中 yourChart 在 class 之外声明，或者您可以在 constructor().

中执行 this.yourChart

如果您想 update/redraw 您的图表，您可以在单击按钮时调用 yourChart.setData(newData)。

Answer 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;

将 Morris.js 与 reactjs 一起使用

Using Morris.js with reactjs

asp.net-mvc

morris.js

reactjs

重要提示