react-chartist 显示纯黑色

Question

我正在使用图表列表。 http://fraserxu.me/react-chartist/

数据显示不正确。数据显示如下：

根据文档，它应该显示如下：

这是文档中的代码： http://fraserxu.me/react-chartist/

这是我的代码：

import React, { Component } from 'react';
import ChartistGraph from "react-chartist";



class PreBuy extends Component {


    render() {


        var simpleLineChartData = {
            labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
            series: [
                [12, 9, 7, 8, 5],
                [2, 1, 3.5, 7, 3],
                [1, 3, 4, 5, 6]
            ]
        }

        let style = {
            height: 400,
            position: "relative",
            top: 300
        }

        return (

            <section>
            <div style={style}>
                  <ChartistGraph data={simpleLineChartData} type={'Line'} />

            </div>




          </section>

        )

    }
}


export default PreBuy

Answer 1

您必须从 bower CDN 包含 css 或将其导入到项目中。

看看documentation

例如添加到您的 index.html:

<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">

react-chartist 显示纯黑色

react-chartist displays solid black

javascript

reactjs

chartist.js

react-chartist