График 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>