So erstellen Sie ein gestapeltes Balkendiagramm aus JSON in chart.js

Question

Ich möchte gestapelt Balkendiagramm erstellen, aber ich weiß nicht, wie dies zu tun und Ich weiß nicht über Wert in Diagramm von JSON setzen Ich habe Json Daten folgendes:

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 
    }] 
    } 
    ] 

ich mag als gestapeltes Balkendiagramm erstellen:

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

mir helfen, bitte. danke. bar chart in chart.js

Answer 1

Zu diesem Zweck können Sie chart.js Ich denke, verwenden, kann dies

helfen

Answer 2

Sie FusionCharts stattdessen versuchen können Ihren Charting Prozess reiz zu machen. Sie können das Diagramm sofort erstellen, ohne umfangreiche Kenntnisse der Datenstrukturen zu benötigen. Und habe ich erwähnt, dass die Charts schön aussehen?

Mit FusionCharts Stacked Charts habe ich unter Verwendung Ihrer Daten ein Beispiel für Sie in JSFiddle erstellt.

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(); 
}); 

Lassen Sie mich wissen, ob dies Ihren Zweck löst.