JJC*_*JJC 29 javascript charts graph d3.js c3.js
我从jsfiddle(https://jsfiddle.net/varunoberoi/mcd6ucge)尝试了这个c3.js代码,但它似乎在我的localhost中不起作用.
我使用uniserver作为我的服务器.我复制粘贴一切,但它不起作用.
<html>
<head>
<!-- CSS -->
<link href="css/c3.css" rel="stylesheet" type="text/css" />
<!-- JAVASCRIPT -->
<script src="js/d3.min.js" type="text/javascript"></script>
<script src="js/c3.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function(){
var chart = c3.generate({
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area',
data2: 'area-spline'
}
},
axis: {
y: {
padding: {bottom: 0},
min: 0
},
x: {
padding: {left: 0},
min: 0,
show: false
}
}
});
}
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
检查开发人员工具控制台时我得到的是:
c3.js:5783 Uncaught TypeError: Cannot read property 'category10' of undefined
我尝试了不同版本的c3.js,但没有.这很奇怪,因为它在jsfiddle而不是在我的本地工作.
Art*_*ken 75
我通过从D3.js v4(4.1.1)降级到v3(3.5.17)解决了另一个项目中完全相同的JavaScript错误.
事实证明,截至2016年7月,C3.js 不支持D3.js v4:
它绝对不会像[D3.js] 4.0一样工作.D3 v4具有完全不同的命名空间,绝不向后兼容.更新到v4是一项非常重要的任务.
这是因为,C3.js基于D3 v3,并且当尝试使用D3 v4运行时会发生错误.
错误发生在下面的代码行:
pattern = notEmpty(config.color_pattern) ?
config.color_pattern : d3.scale.category10().range()
在D3 v4上,d3.scale.category10().range()应该用作d3.scaleOrdinal(d3.schemeCategory10),但由于C3.js无法在D3 v4上运行,因此仅更改此部分代码无意义.
如果有人需要使用D3 v4 +,请尝试https://naver.github.io/billboard.js/.
billboard.js是C3.js的分叉项目,具有与D3 v4 +支持相同的界面.