如何從chart.js中的JSON創建堆疊的條形圖

我想創建堆疊的條形圖，但我不知道如何做到這一點我不知道如何在json中放置值我有Json數據如下：如何從chart.js中的JSON創建堆疊的條形圖

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

我要創建堆疊條形圖爲：

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

幫助我，請。謝謝。 bar chart in chart.js

來源

2017-08-31 jane

請參閱本文檔http://www.chartjs.org/docs/latest/和創建數據集的每提到 –

您發佈的鏈接描述的步驟，該怎麼辦呢？ –

如何克里特數據集作爲http://www.chartjs.org/docs/latest/。我不知道該怎麼辦。 – jane

爲了這個目的，你可以使用chart.js之我想，這可能有助於

來源

2017-08-31 05:18:22

使用此plunker： https://plnkr.co/edit/eWt4l2?p=preview –

你可以嘗試FusionCharts，而不是讓你的製圖過程愉快。它允許您立即創建圖表，而不需要對數據結構有深入的瞭解。我提到圖表看起來很美嗎？

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

讓我知道這是否解決您的目的。

來源

2017-08-31 07:32:02

如何從chart.js中的JSON創建堆疊的條形圖

回答

相關問題