C3.jsまたはD3.jsでカスタムリストチャートを作成

Question

C3.jsまたはD3.jsを使用してカスタムチャートを作成しようとしていますが、これにどう対処するかはわかりません。下のグラフは、私は出力...

C3.js & D3.jsによって提供されている例を見ていたし、チャートのいくつかは、データ入力の名前を持っていたことを発見したはずです方法の例です例えば、チャートの下..

で何らかの方法あります私は希望のチャートを生成するためにこれらを無効にすることができますか私は間違ってこれに近づいていますか？このカスタムリストチャートを作成するにはどうすればよいですか？

Answer 1

この種のリストチャートは、d3を使用して作成することができます。単純なデータオブジェクトを使用して生成することができます。以下、左右別々にrectを作成し、ラベルを追加しました。右側のバーの色は、データオブジェクトのstatusフィールドに基づいています。

はこのバイオリンをチェックアウト：https://jsfiddle.net/qf9po0L5/

svg.selectAll("bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("x", 10) 
    .attr("width", 200) 
    .attr("y", function(d, i) { 
    return i * 32 
    }) 
    .attr("height", 30) 
    .attr("fill", function(d, i) { 
    return i % 2 ? "#83adef" : "lightblue"; 
    }); 

svg.selectAll("second-bar") 
    .data(data) 
    .enter().append("rect") 
    .style("fill", function(d) { 
    return d.status === 0 ? "red" : "green"; 
    }) 
    .attr("x", 212) 
    .attr("width", 20) 
    .attr("y", function(d, i) { 
    return i * 32 
    }) 
    .attr("height", 30); 


var yTextPadding = 20; 
svg.selectAll(".bartext") 
    .data(data) 
    .enter() 
    .append("text") 
    .attr("class", "bartext") 
    .attr("text-anchor", "middle") 
    .attr("fill", "white") 
    .attr("x", 55) 
    .attr("y", function(d, i) { 
    return (i * 32) + 22; 
    }) 
    .text(function(d) { 
    return d.name; 
    }) 
    .attr("fill", "black");