javascript中的分层条形图

Question

您是否曾尝试使用任何开源JavaScript库创建分层条形图？在谷歌搜索时，我发现人们谈论的是堆积条形图，但不是任何地方的分层图表。分层条形图在图像中看起来像Java免费图表支持。

任何关于直接提供图表的图书馆的建议都会很棒。否则我应该选择d3.js。

Answer 1

您可以使用amCharts执行此操作：http://www.amcharts.com/demos/layered-column-chart/

var chart = AmCharts.makeChart("chartdiv", {
    "theme": "none",
    "type": "serial",
    "dataProvider": [{
        "country": "USA",
        "year2004": 3.5,
        "year2005": 4.2
    }, {
        "country": "UK",
        "year2004": 1.7,
        "year2005": 3.1
    }, {
        "country": "Canada",
        "year2004": 2.8,
        "year2005": 2.9
    }, {
        "country": "Japan",
        "year2004": 2.6,
        "year2005": 2.3
    }, {
        "country": "France",
        "year2004": 1.4,
        "year2005": 2.1
    }, {
        "country": "Brazil",
        "year2004": 2.6,
        "year2005": 4.9
    }],
    "valueAxes": [{
        "unit": "%",
        "position": "left",
        "title": "GDP growth rate",
    }],
    "startDuration": 1,
    "graphs": [{
        "balloonText": "GDP grow in [[category]] (2004): [[value]]",
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "title": "2004",
        "type": "column",
        "valueField": "year2004"
    }, {
        "balloonText": "GDP grow in [[category]] (2005): [[value]]",
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "title": "2005",
        "type": "column",
        "clustered":false,
        "columnWidth":0.5,
        "valueField": "year2005"
    }],
    "plotAreaFillAlphas": 0.1,
    "categoryField": "country",
    "categoryAxis": {
        "gridPosition": "start"
    }
});

技巧是你必须将graph的“clustered”属性设置为false，将columnWidth设置为更小的值，如0.5左右。

Answer 2

RGraph有一个演示：

http://www.rgraph.net/demos/bar-in-bar.html