C3JS - 无法读取未定义的属性 'category10'

Question

我试过这个来自 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 中工作，而不是在我的本地工作。

Answer 1

我通过从 D3.js v4 (4.1.1) 降级到 v3 (3.5.17) 解决了另一个项目中完全相同的 JavaScript 错误。

事实证明，C3.js，截至 2016 年 7 月，does not support D3.js v4：

It definitely will not work as-is with [D3.js] 4.0. D3 v4 has a totally different namespace and is in no way backwards compatible. Updating to v4 is a very non-trivial task.

Answer 2

因为，C3.js是基于D3 v3，用D3 v4尝试运行时出现错误。

错误发生在以下代码行：

pattern = notEmpty(config.color_pattern) ?
    config.color_pattern : d3.scale.category10().range()

https://github.com/c3js/c3/blob/master/src/color.js#L7

在 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+ 支持相同的接口。

Answer 3

问题是您使用的C3版本不支持您使用的版本：

D3 ver | requires C3 ver
3.x    |  0.4
4.x    |  0.5
5.x    |  0.6

只要确保您使用的是正确版本的 C3，您就不会看到此错误。

C3JS - 无法读取未定义的属性 'category10'

C3JS - Cannot read property 'category10' of undefined

javascript

charts

graph

d3.js

c3.js

C3JS - 无法读取未定义的 属性 'category10'

C3JS - Cannot read property 'category10' of undefined

javascript

charts

graph

d3.js

c3.js

C3JS - 无法读取未定义的属性 'category10'