JSONのchart.jsから積み上げ棒グラフを作成する方法

Question

積み上げ棒グラフを作成したいのですが、これを行う方法がわかりません jsonのチャートに値を入力することについてわかりません 私はJson次のデータ：、私を助けてください

|    _ 
|    | | Mark 
|    |_| 
|    | |     _ 
|    | | John    | | 
|    |_|     | | John 
|    | |     |_| 
| _   | |     | | 
| | |Alex  | | Alex    | | Alex 
|_|_|___________|_|__________________|_|_______ 
January  February    March 
       Months 

：

var setdata = [{ 
     "data": [{ 
       "month" : "January", 
       "name" : "Alex", 
       "count" : 10 
     }] 
    }, 
    { 
     "data": [{ 
       "month" : "February", 
       "name" : "Alex", 
       "count" : 20 
    }, 
    { 
     "data": [{ 
       "month" : "February", 
       "name" : "John", 
       "count" : 30 
    }, 
    { 
     "data": [{ 
       "month" : "February", 
       "name" : "Mark", 
       "count" : 40 
    }] 
       }, 
    { 
     "data": [{ 
       "month" : "March", 
       "name" : "Alex", 
       "count" : 10 
    }, 
    { 
       "month" : "March", 
       "name" : "John", 
       "count" : 20 
    }] 
    } 
    ] 

私はとして積み上げ棒グラフを作成します。ありがとう。 この目的のために bar chart in chart.js

Answer 1

、あなたはchart.js私は思う を使用することができ、これは、あなたのチャートのプロセスが楽しいにする代わりにFusionChartsを試すことができます

Answer 2

に役立つことがあります。これにより、データ構造の広範な知識を必要とせずにチャートを即座に作成することができます。そして、私はチャートが美しく見えると言いましたか？

FusionCharts積み上げチャートを使用して、データを使用してJSFiddleにサンプルを作成しました。

FusionCharts.ready(function() { 


var revenueChart = new FusionCharts({ 
    type: 'stackedcolumn2d', 
    renderAt: 'chart-container', 
    width: '550', 
    height: '450', 
    dataFormat: 'json', 
    dataSource: { 
     "chart": { 
     "caption": "Alex-John-Mark", 
     "subCaption": "", 
     "xAxisname": "Month", 
     "yAxisName": "Units", 

    "paletteColors": "#4A148C,#004D40, #FF6F00", 
    "bgColor": "#ffffff", 
    "borderAlpha": "20", 
    "showCanvasBorder": "0", 
    "usePlotGradientColor": "0", 
    "plotBorderAlpha": "10", 
    "legendBorderAlpha": "0", 
    "legendShadow": "0", 
    "valueFontColor": "#ffffff", 
    "showXAxisLine": "1", 
    "xAxisLineColor": "#999999", 
    "divlineColor": "#999999", 
    "divLineIsDashed": "1", 
    "showAlternateHGridColor": "0", 
    "subcaptionFontBold": "0", 
    "subcaptionFontSize": "14", 
    "showHoverEffect": "1" 
    }, 
    "categories": [{ 
    "category": [{ 
     "label": "January" 
     }, { 
     "label": "February" 
     }, { 
     "label": "March" 
     } 

    ] 
    }], 
    "dataset": [{ 
    "seriesname": "Alex", 
    "data": [{ 
     "value": "10" 
     }, { 
     "value": "20" 
     }, 

     { 
     "value": "10" 
     } 
    ] 
    }, { 
    "seriesname": "John", 
    "data": [{ 
     "value": "0" 
     }, { 
     "value": "30" 
     }, 

     { 
     "value": "20" 
     } 
    ] 
    }, { 
    "seriesname": "Mark", 
    "data": [{ 
     "value": "0" 
     }, { 
     "value": "40" 
     }, 

     { 
     "value": "0" 
     } 
    ] 
    }] 


    } 
    }).render(); 
}); 

これがあなたの目的を解決するかどうか教えてください。