1

C3.js(c3js.org) を使用してグラフを作成しようとしていますが、データ (およびそのグラフに固有のその他の小さな偏差) 以外のすべてを指定してから、そのバリエーションのすべてのグラフにそれを再利用したいと考えています (aチャートの特定の構成)。

C3.js について私が見つけたすべてのドキュメントとすべての例は、単一のグラフの作成方法のみを扱っています。これを複数のチャートに適用すると、多くのコードが繰り返されることになり、変更を加える際の一貫性が保証されません。

これに関連して私が見つけた唯一のことは、D3.js (d3js.org) で再利用可能なグラフを作成するという概念、 C3.js で使用される基本的なライブラリ、およびその概念に触発された実装です。C3.js が提供する高レベルの抽象化が必要なため、これはあまり役に立ちませんが、これらは私が探しているものについてのアイデアを提供してくれるかもしれません。

これに関する情報は見つかりませんでしたが、1 つのアイデアは、既存のタイプに基づいているが追加の構成も含むチャート タイプを作成することです (たとえば、既存の「棒」チャートに基づいて「horizo​​ntalbar」と呼ばれる新しいチャート タイプを作成します)。タイプ)。

これは私が作成したbindtoチャートcolumnsで、このチャートのユニークな部分です。残りはテンプレートの一部である必要がありますが、方法がわかりません。

var chart = c3.generate({
 bindto: '#chart',
data: {
    columns: [
        ['data1', 125.2],
        ['data2', 282.7],
        ['data3', 3211.1],
        ['data4', 212.2],
        ['data5', 131.1], 
        ['data6', 329.7]
    ],
    type: 'pie',
    order: null
},
pie: {
    label: {
        format: function (value, ratio, id) {
            return d3.format('.1f')(ratio*100)+'%'; //percent with one decimal
        }
    }
},
tooltip: {
    format: {
        value: function (value, ratio, id, index) {
            return value+'mkr ('+d3.format('.1f')(ratio*100)+'%)'; //example: 155.2mkr (3.3%)
        } 
    }
},
legend: {
    item: {
        onclick: function () {} //disable clicking to hide/show parts of the chart
    }
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.js"></script>
<div id="chart"></div>

4

1 に答える 1