複数のデータとそれぞれのデータ点を凡例とした積み上げ棒グラフ

積み上げ棒グラフを作成しようとしています。 x上の各ラベルには、積み重ねられた異なるデータポイントがあります。いくつかのデータポイントはx軸を横切って重なり、あるデータポイントは特定のラベルのみにユニークです。
フュージョンチャート（http://jsfiddle.net/fu2pprmk/）とd3 jsで試しました。私は私が欠損値のチェックに対応する必要があるようなエラー複数のデータとそれぞれのデータ点を凡例とした積み上げ棒グラフ

Error: attribute y: Expected length, "NaN".

Error: attribute height: Expected length, "NaN".

が見える取得のためのデータポイントを欠落していると、それを実装しようとしたときに最も近い私が（http://jsfiddle.net/wz1cwrLL/）d3.jsに出会いました。 d3jsについて全く知らない。入力は参考になります。

私のデータの例はこのフィドルです。

http://jsfiddle.net/wz1cwrLL/1/

また、これはrChartsで達成することができますか？

出典

2017-03-16 user5249203

2007年のY軸に積み重ねられたアイテムの数は、その他の年と一致しません。ここにあなたのフィドルに示すように、最も単純な形では

http://jsfiddle.net/mwvhhe3o/

作業フィドルは、データ・アレイ内の各オブジェクトは、同じ数のメンバーを持っている必要があります。

{ year: "2006", redDelicious: "0", mcintosh: "15", oranges: "9", pears: "6", melons:"0", plum:"0", grapes:"0", cherries:"0" }

あなたは、次の

{ year: "2006", redDelicious: "0", mcintosh: "15", oranges: "9", pears: "6", melons:"0", plum:"0", grapes:"0", cherries:"0" }

だからデータのあなたの例に同じ原理を適用することはできませんが、ここで私はそれを行うだろうかです。

var data = [           
{ Gene: "KRAS", Leu858Arg: 0, Thr790Met: 0,Gly12Cys: 17, Gly12Val: 12, Gly12Asp: 9, Gly13Asp: 5, Val600Glu: 0 , Arg273His: 0, His1047Arg: 0, Glu69: 0} 
{ Gene: "BRAF", Leu858Arg: 0, Thr790Met: 0, Gly12Cys: 0, Gly12Val: 0, Gly12Asp: 0, Gly13Asp: 0, Val600Glu: 13 , Arg273His: 0, His1047Arg: 0, Glu69: 0 } 
{ Gene: "EGFR", Leu858Arg: 8, Thr790Met: 5,Gly12Cys: 0, Gly12Val: 0, Gly12Asp: 0, Gly13Asp: 0, Val600Glu: 0 , Arg273His: 0, His1047Arg: 0, Glu69: 0 } 
{ Gene: "TP53", Leu858Arg: 0, Thr790Met: 0,Gly12Cys: 0, Gly12Val: 0, Gly12Asp: 0, Gly13Asp: 0, Val600Glu: 0 , Arg273His: 6 , His1047Arg: 0, Glu69: 0 } 
{ Gene: "PIK3CA", Leu858Arg: 0, Thr790Met: 0,Gly12Cys: 0, Gly12Val: 0, Gly12Asp: 0, Gly13Asp: 0, Val600Glu: 0 , Arg273His: 0, His1047Arg: 4 , Glu69: 0 } 
{ Gene: "CDKN2A", Leu858Arg: 0, Thr790Met: 0,Gly12Cys: 0, Gly12Val: 0, Gly12Asp: 0, Gly13Asp: 0, Val600Glu: 0, Arg273His: 0, His1047Arg: 0, Glu69: 4 } 
];

希望します。

出典

2017-03-21 16:53:27 pparas

答えに感謝します。 – user5249203

FusionCharts "stackedcolumn2d"チャートを使用して上記で提供されたフィドルは、データプロットの色を設定するために使用される個々のデータオブジェクトに定義された "color"属性を持っています。

各凡例は、それぞれのデータセットシリーズを表します。シリーズに設定されている色は、そのシリーズの凡例に反映されます。このためには、データセットレベルで「カラー」属性を設定する必要があります。

注意：凡例は、個々のデータプロットを表すことはできません。

ここでフィドルを参照してください：http://jsfiddle.net/Akash008/dty7dfzk/4/

FusionCharts.ready(function() { 
var revenueChart = new FusionCharts({ 
type: 'stackedcolumn2d', 
renderAt: 'chart-container', 
width: '500', 
height: '300', 
dataFormat: 'json', 
dataSource: { 
    "chart": { 
    "caption": "Revenue split by product category", 
    "subCaption": "For current year", 
    "xAxisname": "Quarter", 
    "yAxisName": "Revenues (In USD)", 
    //"paletteColors": "#FF0000,#00FF00,#0000FF,#FFFF00", 
    "showSum": "1", 
    "numberPrefix": "$", 
    "showLegend": "1", 
    "theme": "fint", 
    "legendPosition": "right", 
    "legendCaption": "food Items", 
    "legendScrollBgColor": "#cccccc", 
    "legendScrollBarColor": "#999999", 
    "plotHighlightEffect": "fadeout", 
    }, 

    "categories": [{ 
    "category": [{ 
     "label": "Non-dairy Product" 
    }, { 
     "label": "Vegetables" 
    }, { 
     "label": "Fruits" 
    }, { 
     "label": "Vegetables" 
    }] 
    }], 

    "dataset": [{ 
    "seriesname": "Food Products", 
    "color": "#FF0000", 
    "data": [{ 
     "toolText": "Egg", 
     "value": "11000" 
    }, { 
     "toolText": "Potato", 
     "value": "15000" 
    }, { 
     "toolText": "Apple", 
     "value": "13500" 
    }, { 
     "toolText": "lettuce", 
     "value": "15000" 
    }] 
    }, { 
    "seriesname": "Non-Food Products", 
    "color": "#00FF00", 
    "data": [{ 
     "toolText": "Meat", 
     "value": "11400" 
    }, { 
     "toolText": "Eggplant", 
     "value": "14800" 
    }, { 
     "toolText": "Oranges", 
     "value": "8300" 
    }, { 
     "toolText": "cilantro", 
     "value": "11800" 
    }] 
    }, { 
    "seriesname": "Non-Food Products", 
    "color": "#0000FF", 
    "data": [{ 
     "toolText": "Fish", 
     "value": "11400" 
    }, { 
     "toolText": "Carrot", 
     "value": "14800" 
    }, { 
     "toolText": "plums", 
     "value": "8300" 
    }, { 
     "toolText": "Kale", 
     "value": "11800" 
    }] 
    }, { 
    "seriesname": "Non-Food Products", 
    "color": "#FFFF00", 
    "data": [{ 
     "toolText": "Fish", 
     "value": "11400" 
    }, { 
     "toolText": "Carrot", 
     "value": "14800" 
    }, { 
     "toolText": "plums", 
     "value": "8300" 
    }, { 
     "toolText": "Kale", 
     "value": "11800" 
    }] 
    }], 
} 
}) 
    revenueChart.render(); 
});

また、一度に全てのシリーズに色を設定するチャートレベル属性「paletteColors」を設定することで、同じことを達成することができます。フィドルを参照してください：http://jsfiddle.net/Akash008/dty7dfzk/3/

FusionCharts.ready(function() { 
var revenueChart = new FusionCharts({ 
type: 'stackedcolumn2d', 
renderAt: 'chart-container', 
width: '500', 
height: '300', 
dataFormat: 'json', 
dataSource: { 
    "chart": { 
    "caption": "Revenue split by product category", 
    "subCaption": "For current year", 
    "xAxisname": "Quarter", 
    "yAxisName": "Revenues (In USD)", 
    "paletteColors": "#FF0000,#00FF00,#0000FF,#FFFF00", 
    "showSum": "1", 
    "numberPrefix": "$", 
    "showLegend": "1", 
    "theme": "fint", 
    "legendPosition": "right", 
    "legendCaption": "food Items", 
    "legendScrollBgColor": "#cccccc", 
    "legendScrollBarColor": "#999999", 
    "plotHighlightEffect": "fadeout", 
    }, 

    "categories": [{ 
    "category": [{ 
     "label": "Non-dairy Product" 
    }, { 
     "label": "Vegetables" 
    }, { 
     "label": "Fruits" 
    }, { 
     "label": "Vegetables" 
    }] 
    }], 

    "dataset": [{ 
    "seriesname": "Food Products", 
    "data": [{ 
     "toolText": "Egg", 
     "value": "11000" 
    }, { 
     "toolText": "Potato", 
     "value": "15000" 
    }, { 
     "toolText": "Apple", 
     "value": "13500" 
    }, { 
     "toolText": "lettuce", 
     "value": "15000" 
    }] 
    }, { 
    "seriesname": "Non-Food Products", 
    "data": [{ 
     "toolText": "Meat", 
     "value": "11400" 
    }, { 
     "toolText": "Eggplant", 
     "value": "14800" 
    }, { 
     "toolText": "Oranges", 
     "value": "8300" 
    }, { 
     "toolText": "cilantro", 
     "value": "11800" 
    }] 
    }, { 
    "seriesname": "Non-Food Products", 
    "data": [{ 
     "toolText": "Fish", 
     "value": "11400" 
    }, { 
     "toolText": "Carrot", 
     "value": "14800" 
    }, { 
     "toolText": "plums", 
     "value": "8300" 
    }, { 
     "toolText": "Kale", 
     "value": "11800" 
    }] 
    }, { 
    "seriesname": "Non-Food Products", 
    "data": [{ 
     "toolText": "Fish", 
     "value": "11400" 
    }, { 
     "toolText": "Carrot", 
     "value": "14800" 
    }, { 
     "toolText": "plums", 
     "value": "8300" 
    }, { 
     "toolText": "Kale", 
     "value": "11800" 
    }] 
    }], 


} 
    }) 
    revenueChart.render(); 
});

これが役に立ちます。

出典

2017-03-17 08:52:39 Akash

色の選択を自動化する方法はありますか？私は100ポイントのデータポイントを持っていますが、手動で色を追加したくありません。 – user5249203

これは私がhttp：// jsfiddleを達成しようとしていることです。net/fu2pprmk/ – user5249203

複数のデータとそれぞれのデータ点を凡例とした積み上げ棒グラフ

答えて

関連する問題