Question

我对reactjs库全新。我发现这个库非常有趣，并希望在我的图表分析项目（这是基于Java的spring项目）中实现。基本上我想以常规方式实现它，不想安装npm或任何包管理器。我有两个文件：

文件：index.html

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.0/react-bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-chartjs-2/2.1.0/react-chartjs-2.min.js"></script>
    <script type="text/babel" src="chart.js"></script>
    </head>
    <body>  
        <div id="root"></div>   
    </body>
</html>

文件：chart.js

var MyComponent = React.createClass({
    render: function(){
      return <Line data={chartData} optionis={chartOptions} width="90%" height="70%" /> 
    }
});
ReactDOM.render(<MyComponent />, document.getElementById("root"));

我认为，它应该有用，但我收到错误： 未捕获的ReferenceError：未定义行

注意：我不想使用npm manager。因此，使用 npm 或使用javascript 需要或导入的答案不适用于我的要求。

Answer 1

您必须导入chartJS库（或在ES5中导入var Line = require（'Line'））。

这就是控制台说Line未定义的原因。

Answer 2

试试这个反应库 https://github.com/reactjs/react-chartjs。
你只需要跑在项目中 npm install --save react-chartjs 。
然后只需从eact-chartjs导入LineChart



 var LineChart = require("react-chartjs").Line;
    var MyComponent = React.createClass({
        render: function() {
      return <LineChart data={chartData} optionis={chartOptions} width="90%" height="70%" /> 
        }
    });
    ReactDOM.render(<MyComponent />, document.getElementById("root"));

var LineChart = require("react-chartjs").Line; var MyComponent = React.createClass({ render: function() { return <LineChart data={chartData} optionis={chartOptions} width="90%" height="70%" /> } }); ReactDOM.render(<MyComponent />, document.getElementById("root"));

Charjs 2 with reactjs

2 个答案: