使用D3和C3绘制简单图表

Question

我正在使用 node.js（我不确定在这种情况下是否重要）。我正在尝试使用 d3 和 c3 绘制一个简单的条形图。我的 html 如下所示。没有输出。我在这里做错了什么？

var chart = c3.generate({
 data:{
  columns:[
  ['data1', 90, 30]
  ],
  type: 'bar'
 }
});

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.js"></script>
<head>
  <title></title>
</head>
<body>
  <div id="chart"></div>
</body>

Answer 1

使用 D3 v3 而不是 v4。

  var chart = c3.generate({
 data:{
  columns:[
  ['data1', 90, 30]
  ],
  type: 'bar'
 }
});

<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.js"></script>
<div id="chart"></div>

Answer 2

var chart = c3.generate({
 data:{
  columns:[
    ['data1', 90, 30, 100, 200]
  ],
  type: 'bar'
 }
});

<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.js"></script>
<div id="chart"></div>

您必须将 d3.v3 与 c3 一起使用，而不是 d3.v4...

使用D3和C3绘制简单图表

Drawing a simple chart using D3 and C3

html

javascript

node.js

d3.js

c3.js