javascript - Chartist.js React 模块未显示绘图

Question

我正在通过react-chartistMeteor.js 应用程序中的 npm 包使用 Chartist.js 库来绘制一些数据。

问题： Chartist 图表仅显示轴，但不显示折线图！我错过了什么吗？

渲染组件

图表.jsx

import React, { Component } from 'react';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import ChartistGraph from 'react-chartist';


export class Chart extends Component {
    render() {
        var data = {
            labels: ['a', 'b', 'c', 'd', 'e'],
            series: [[1,2,3,4,5]]
        }

        const type = 'Line';

        return (
            <div>
                <ChartistGraph data={data} type={type} />
            </div>
        )
    }
}

包.json

  "dependencies": {
    "babel-runtime": "^6.23.0",
    "chartist": "^0.10.1",
    "meteor-node-stubs": "~0.2.0",
    "meteor-rxjs": "^0.4.7",
    "react": "^15.4.2",
    "react-addons-pure-render-mixin": "^15.4.2",
    "react-chartist": "^0.12.0",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2",
    "rxjs": "^5.2.0"
  }

Answer 1

如果您还没有，请尝试将他们的 CDN 包含在您的根 HTML 文件中。您可以在文档或此处找到它 - https://www.npmjs.com/package/react-chartist

他们提到 Chartist.js CSS 代码不包含在 react-chartist 包中，但他们将上述脚本添加到您的应用程序中。否则，您可能必须手动设置图表的样式才能呈现它。