5

新しいc3jsライブラリを使用しています。グラフ内のデータのラベルを変更する方法はありますか? 各バーがドル値である棒グラフがあります。各バーのラベルを 100 ドルではなく 100 ドルにしたい。値を 100 ドルに設定すると、ライブラリはチャートを作成できません。基になる値でない場合、ラベルを変更する方法はありますか?

4

2 に答える 2

9

データ ラベルと軸の目盛りの両方の書式を指定できます。以下の例を見てください。

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="./css/c3.css">
        <script src="./js/d3.min.js"></script>
        <script src="./js/c3.min.js"></script>
    </head>
    <body>
    <div class='chart'>
    <div id='chart'></div>
    </div>
    <script>
        var chart = c3.generate({
            data: {
                columns: [
                    ['data1', 30, 200, 100, 400, 150, 250],
                    ['data2', 130, 100, 140, 200, 150, 50]
                ],
                type: 'bar',
                labels: {
                    format: {
                        y: d3.format("$,")
                        //y: function (v, id) { return "Custom Format: " + id; }
                    }
                }
            },
            axis : {
                y : {
                    tick: {
                        format: d3.format("$,")
                        //format: function (d) { return "Custom Format: " + d; }
                    }
                }
            }
        });
    </script>
    </body>
</html>

結果のグラフは次のようになります。

d3.jsのフォーマット オプションを確認するか、独自の関数を記述できます (上記のコメント アウトされたコードを参照)。

于 2014-05-13T01:06:18.130 に答える
6

値を文字列として表示することもできます: http://c3js.org/samples/data_stringx.html

var chart = c3.generate({
    data: {
        x : 'x',
        columns: [
            ['x', '$100', '$200', '$300', '$400'],
            ['download', 30, 200, 100, 400],
            ['loading', 90, 100, 140, 200],
        ],
        groups: [
            ['download', 'loading']
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'categorized' // this is needed to load string x value
        }
    }
});
于 2014-05-21T06:59:17.133 に答える