0

我对 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 管理器。因此，使用npm或使用 javascript require或import的答案不适用于我的要求。

4

2 回答 2

0

你必须导入 chartJS 库（或者在 ES5 中它的 var Line = require('Line')）。

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

于 2017-07-05T15:28:28.937 回答
0

试试这个反应库 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"));

于 2017-07-05T15:53:31.780 回答