C3.js图形未显示

Question

I am trying to make a graph with C3 following the exact tutorial from there website. My HTML document is in the same folder as the c3.css , c3.min.js files and the path for d3.min.js is correct.

However when I load the page in my browser I get this . It's like the code is not recognized.. Do someone with experience in C3 could help me? Or maybe it's a problem with 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

You have to wrap script around your code.

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