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绘制一个简单的图表

2 个答案: