C3.js折线图错误[重复]答案

【问题标题】：C3.js line chart error [duplicate]C3.js折线图错误[重复]
【发布时间】：2017-02-09 05:32:42
【问题描述】：

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

Uncaught ReferenceError: c3 is not defined 在 index.html

<!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>

寻找解决方案

【问题讨论】：

你需要在加载c3脚本后移动你的代码（c3.generate）

标签： javascript d3.js c3.js

【解决方案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> 加载之后移动你的脚本标签。

【讨论】：