C3.js图表​​未显示

Question

我正在尝试根据网站上的确切教程制作C3图表。我的HTML文档与c3.css，c3.min.js文件位于同一文件夹中，d3.min.js的路径正确。

然而，当我在浏览器中加载页面时，我得到this。这就像代码无法识别..有C3经验的人可以帮助我吗？或者这可能是javascript的问题？

<!-- Load c3.css -->
<link href="c3.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="d3-master/d3.min.js" charset="utf-8"></script>
<script src="c3.min.js"></script>

<div id="chart"></div>

var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ],
      axes: {
        data2: 'y2' // ADD
      }
    },
    axis: {
      y2: {
        show: true // ADD
      }
    }
});

Answer 1

您必须在代码周围包裹script。

<!-- Load c3.css -->
<link href="c3.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="d3-master/d3.min.js" charset="utf-8"></script>
<script src="c3.min.js"></script>

<div id="chart"></div>
// Wrap your script by script tag
<script>
var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ],
      axes: {
        data2: 'y2' // ADD
      }
    },
    axis: {
      y2: {
        show: true // ADD
      }
    }
});

</script>