web-dev-qa-db-ja.com

C3JS-未定義のプロパティ「category10」を読み取ることができません

Jsfiddleからこのc3.jsコードを試しました（ https://jsfiddle.net/varunoberoi/mcd6ucge ）が、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>

Developer Toolsのコンソールを確認すると、次のことがわかりました。

c3.js:5783 Uncaught TypeError: Cannot read property 'category10' of undefined

私はc3.jsの異なるバージョンを試しましたが、何も試しませんでした。私の地元ではなくjsfiddleで動作しているため、奇妙です。

javascriptd3.jsgraphchartsc3.js
29
JJC

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への更新は非常に簡単な作業です。

75
Arto Bendiken

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)として使用する必要がありますが、D3 v4ではC3.jsを実行できないため、この部分のコードのみを変更しても意味がありません。

D3 v4 +を使用する必要がある場合は、 https://naver.github.io/billboard.js/ を試してください。

billboard.js は、C3.jsの分岐プロジェクトであり、D3 v4 +サポートと同じインターフェースを備えています。

7
Jae Sung Park

問題は、使用しているC3のバージョンが、使用しているバージョンをサポートしていないことです。

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

正しいバージョンのC3を使用していることを確認するだけで、このエラーは表示されません。

0
BryanH