C3JS - 无法读取未定义的属性“category10”
Posted
技术标签:
【中文标题】C3JS - 无法读取未定义的属性“category10”【英文标题】：C3JS - Cannot read property 'category10' of undefined 【发布时间】：2016-11-15 15:01:27 【问题描述】：我从 jsfiddle (https://jsfiddle.net/varunoberoi/mcd6ucge) 尝试了这个 c3.js 代码，但它似乎在我的本地主机中不起作用。
我使用 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 中工作，而不是在我的本地。
【问题讨论】：
尝试为两个库提供完整的绝对路径。将代码移到正文的末尾也是一个好主意。 做了一些组合后，原来是d3.js路径不起作用。我试图提供整个 localhost 路径和 C: 驱动器路径，但它仍然无法正常工作。我得到的解决方案是使用外部 url (d3js.org/d3.v3.js)。我不知道它是如何工作的，但是，是的，它现在正在工作。感谢您的想法。 :) 不管怎样，我通过从 D3.js v4 (4.1.1) 降级到 v3 (3.5.17) 解决了另一个项目中完全相同的 JS 错误。 @ArtoBendiken，嘿，它有效！谢谢！如果可以的话，我会投票赞成你的评论。 @JJC 酷！由于它对您有用，因此我添加了一个正确的答案，以便其他偶然发现该问题的人能够弄清楚。 【参考方案1】：我通过从 D3.js v4 (4.1.1) 降级到 v3 (3.5.17) 解决了另一个项目中完全相同的 JavaScript 错误。
事实证明，C3.js，截至 2016 年 7 月，does not support D3.js v4：
它肯定不会在 [D3.js] 4.0 中按原样工作。 D3 v4 具有完全不同的命名空间，并且绝不向后兼容。更新到 v4 是一项非常重要的任务。
【讨论】：
你可以在这里获取版本github.com/d3/d3/releases/tag/v3.5.17？感谢您的回答，这对您有很大帮助。 如果您不使用 npm 并且使用 D3 的 rails gem 将此代码添加到您的 gem 文件将解决问题gem 'd3-rails', '~> 3.5.17'
rubygems.org/gems/d3-rails/versions/3.5.17 哦，这也是我在上面评论中引用的 gem 版本的链接。
c3.js版本重要吗？【参考方案2】：
这是因为，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 的一个 fork 项目，具有与 D3 v4+ 支持相同的接口。
【讨论】：
【参考方案3】：问题是您使用的 C3 版本不支持您使用的版本：
D3 ver | requires C3 ver
3.x | 0.4
4.x | 0.5
5.x | 0.6
只需确保您使用的是正确版本的 C3，您就不会看到此错误。
【讨论】：
以上是关于C3JS - 无法读取未定义的属性“category10”的主要内容，如果未能解决你的问题，请参考以下文章
带有 Ionic 4 的 SQLite？无法读取未定义类型错误的属性“then”：无法读取未定义的属性“then”
NextJS：未捕获的类型错误：无法读取未定义的属性（读取“属性”）