Question

我正在使用此代码生成C3.js折线图，但在控制台中遇到错误

未捕获的ReferenceError：未定义c3 在index.html

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>C3Charts</title>
  <script>
    //Column data
    var chart = c3.generate({
      bindto: '#chart',
      data: {
        columns: [
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 50, 20, 10, 40, 15, 25]
        ]
      }
    });
  </script>
</head>

<body>

  <div id="chart">

  </div>

  <!-- Load c3.css -->
  <link href="bower_components/c3/c3.css" rel="stylesheet" type="text/css">

  <!-- Load d3.js and c3.js -->
  <script src="bower_components/d3/d3.min.js" charset="utf-8"></script>
  <script src="bower_components/c3/c3.min.js"></script>
</body>

</html>

＆＃13;

寻找解决方案

Answer 1

的位置存在问题

<script>
//Column data
var chart = c3.generate({
  bindto: '#chart',
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]
    ]
  }
});

目前位于 head 标记中。

解决方法是在c3.js之后移动脚本标记并加载<div id="chart"></div>。

C3.js折线图错误

1 个答案: