Visualizing a chart using c3

问题

I am trying to reproduce some code to generate a chart using c3. This script does not render anything though. Why? (the files listed in href are in the same folder)

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

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

  <meta charset="UTF-8">
  <title>title </title>
</head>
<body>
  <div id="chart"></div>
  <script>
  var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});
</script>
</body>

回答1:

This is a working example so if chart is not loaded probably you are not referencing correctly to the libraries C3 and D3.

Check in the web console (usage in Chrome here) of your browser if libraries are missing.

Check this steps:

For C3 installation follow the guide: http://c3js.org/gettingstarted.html
For D3 you can user the source remote connection: http://d3js.org/d3.v3.min.js

回答2:

For anyone else following this thread I would like to suggest you can use the following content delivery network (CDN) resources to load your D3.js, and C3.js libraries:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">  
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>

I loaded your chart without a problem coding these resources into the <head> section of my document.

来源：https://stackoverflow.com/questions/28518454/visualizing-a-chart-using-c3

标签

html

visualization

data-visualization