如何在 amcharts 上制作交互式堆积条形图？

Question

我在 amcharts.js 中编写了一些代码来创建堆叠条形图（以数据作为参数）和饼图。

代码可以在这里找到： http://jsfiddle.net/akashdmukherjee/myd363tw/30/

HTML:

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS:

#chartdiv {
    width       : 100%;
    height      : 500px;
    font-size   : 11px;
}

JS:

var year_wise_continent_breakdown_data = 
[
{"year": 2003,"europe": 2.5,"namerica": 2.5,"asia": 2.1,"lamerica": 0.3,"meast":0.2,"africa": 0.1},
{"year": 2004,"europe": 2.6,"namerica": 2.7,"asia": 2.2,"lamerica": 0.3,"meast": 0.3,"africa": 0.1}
, {"year": 2005,"europe": 2.8,"namerica": 2.9,"asia": 2.4,"lamerica": 0.3,"meast": 0.3,"africa": 0.1}
];

var quarter_wise_continent_breakdown_data_for_2003 = 
[
{"year": "Q1","europe": 0.5,"namerica": 2.1,"asia": 1.1,"lamerica": 0.3,"meast":0.2,"africa": 0.1},
{"year": "Q2","europe": 2.6,"namerica": 2.7,"asia": 3.2,"lamerica": 0.3,"meast": 0.3,"africa": 0.1}
, {"year": "Q3","europe": 2.8,"namerica": 1.7,"asia": 1.4,"lamerica": 1.3,"meast": 1.3,"africa": 2.1}
];

var quarter_wise_continent_breakdown_data_for_2004 = 
[
{"year": "Q1","europe": 1.5,"namerica": 2.1,"asia": 1.1,"lamerica": 0.3,"meast":0.2,"africa": 0.1},
{"year": "Q2","europe": 4.6,"namerica": 2.7,"asia": 3.2,"lamerica": 0.3,"meast": 0.3,"africa": 0.1}
, {"year": "Q3","europe": 5.8,"namerica": 1.7,"asia": 1.4,"lamerica": 1.3,"meast": 1.3,"africa": 2.1}
];

var quarter_wise_continent_breakdown_data_for_2005 = 
[
{"year": "Q1","europe": 3.9,"namerica": 2.1,"asia": 1.1,"lamerica": 0.3,"meast":0.2,"africa": 0.1},
{"year": "Q2","europe": 2.1,"namerica": 2.7,"asia": 3.2,"lamerica": 0.3,"meast": 0.3,"africa": 0.1}
, {"year": "Q3","europe": 0.8,"namerica": 1.7,"asia": 1.4,"lamerica": 1.3,"meast": 1.3,"africa": 2.1}
];

var continent_breakdown_data = [ 
    {"country": "UK", "litres": 99},
    {"country": "Belgium","litres": 60},
    { "country": "The Netherlands","litres": 50}
];

var make_pieChart_from_continent_breakdown_data = function(selected_year, selected_region){
    AmCharts.makeChart("chartdiv", {
        "type": "pie",
        "theme": "none",
        "dataProvider": continent_breakdown_data,
        "valueField": "litres",
        "titleField": "country",
        "exportConfig":{    
          menuItems: [{
          icon: '/lib/3/images/export.png',
          format: 'png'   
          }]  
        }
    });
};

var make_stackedBars_chart = function(data_for_stackedBars_chart){
    AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "none",
        "legend": {
            "horizontalGap": 10,
            "maxColumns": 1,
            "position": "right",
            "useGraphSettings": true,
            "markerSize": 10
        },
        "dataProvider": data_for_stackedBars_chart,
        "valueAxes": [{
            "stackType": "regular",
            "axisAlpha": 0.3,
            "gridAlpha": 0
        }],
        "graphs": [{
            "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
            "fillAlphas": 0.8,
            "labelText": "[[value]]",
            "lineAlpha": 0.3,
            "title": "Europe",
            "type": "column",
            "fillColors": "#3C3C3C",
            "valueField": "europe"
        }, {
            "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
            "fillAlphas": 0.8,
            "labelText": "[[value]]",
            "lineAlpha": 0.3,
            "title": "North America",
            "type": "column",
            "color": "#000000",
            "valueField": "namerica"
        }, {
            "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
            "fillAlphas": 0.8,
            "labelText": "[[value]]",
            "lineAlpha": 0.3,
            "title": "Asia-Pacific",
            "type": "column",
            "color": "#000000",
            "valueField": "asia"
        }, {
            "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
            "fillAlphas": 0.8,
            "labelText": "[[value]]",
            "lineAlpha": 0.3,
            "title": "Latin America",
            "type": "column",
            "color": "#000000",
            "valueField": "lamerica"
        }, {
            "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
            "fillAlphas": 0.8,
            "labelText": "[[value]]",
            "lineAlpha": 0.3,
            "title": "Middle-East",
            "type": "column",
            "color": "#000000",
            "valueField": "meast"
        }, {
            "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
            "fillAlphas": 0.8,
            "labelText": "[[value]]",
            "lineAlpha": 0.3,
            "title": "Africa",
            "type": "column",
            "color": "#000000",
            "valueField": "africa"
        }],
        "categoryField": "year",
        "categoryAxis": {
            "gridPosition": "start",
            "axisAlpha": 0,
            "gridAlpha": 0,
            "position": "left"
        },
        "exportConfig":{
            "menuTop":"20px",
            "menuRight":"20px",
            "menuItems": [{
            "icon": '/lib/3/images/export.png',
            "format": 'png'   
            }]  
        }
    })
};

//****************************************************************************
// RENDER CHARTS
//****************************************************************************
make_stackedBars_chart(year_wise_continent_breakdown_data);
////make_pieChart_from_continent_breakdown_data(2005, "Asia-Pacific");

如果您注意到了，我通过传入数据使用 make_stackedBars_chart() 函数创建堆叠条形图。在我的代码中，有四个选项可以作为堆积条形图的数据传递： 1. year_wise_continent_breakdown_data 2. quarter_wise_continent_breakdown_data_for_2003 3. quarter_wise_continent_breakdown_data_for_2004 4. quarter_wise_continent_breakdown_data_for_2003

我也可以使用函数 make_pieChart_from_continent_breakdown_data(selected_year, selected_region) 创建饼图。为简单起见，饼图仅使用了一份定义为 continent_breakdown_data 变量的数据。

此 'dashboard' 的用户看到的第一个视图是按大洲细分的年度趋势。这是当您打开 jsfiddle link 时呈现的页面。这是通过函数调用 make_stackedBars_chart(year_wise_continent_breakdown_data);

实现的

但现在是有趣的部分。

如何使它具有交互性？让我们从第一个视图开始。

当用户单击第一列（2003 年的数据）、第二列（2004 年的数据）或第三列（2005 年的数据）时，我想要 select ed 列以灰色突出显示。像这样的东西。我希望这可以通过在函数中设置图形对象的 fillColors 属性来设置。但是怎么办？

接下来，当用户双击 selected 列时，用户应该能够向下钻取到一个新的堆叠条形图，该图显示了类别细分但在 [= 的季度趋势84=]ed 年。所以，假设用户 selected 是 2005 年。当他们单击时，它变成灰色。单击之后或单击之前，如果他们双击 2005 年列，则会加载一个新的堆积条形图，顶部有一个附加按钮以返回到上一个图表。我的理解是，这需要使用 make_stackedBars_chart(quarter_wise_continent_breakdown_data_for_2005) 的函数调用来完成；这应该看起来像这样：

完成此操作后，用户应该可以单击顶部按钮从那里返回到旧图表并进入此视图。

很好。因此，用户看到了年度视图和季度视图。但是，现在他们只想 select 2005 年的一个类别（亚太地区），并查看其他一些特定的数据。选择图表上的任何部分应首先收集他们 selected 的类别（在本例中为 region/continent）以及他们 selected 的年份。 selected 区域应在单击时变为灰色。双击 before/after 单击 2005 年亚太地区的这一部分，此信息应传递到相应地创建饼图的函数中。为此，可以进行函数调用 make_pieChart_from_continent_breakdown_data(2005, "Asia-Pacific");结果图的顶部还应该有一个按钮，用于返回到原始视图。它应该看起来像这样。

点击 'Go Back'，它们应该被重定向到原始的逐年堆叠条形图。

Answer 1

您应该在向下钻取数据时遵循此示例：http://www.amcharts.com/tutorials/drill-down-column-chart/

要点：生成季度数据的数据作为年数据的子数据，并在图表上附加点击事件，捕捉点击柱状图打开下一级。

结构是这样的:

data = [{country : "Country1", data1 : "value1", data2 : "value2", 
        subdata [{ country : "Country1", data1.1 : "value1.1", data2.1 : "data2.1"},
                 {country : "Country1", data1.2 : "value1.2", data2.2 : "data2.2"}]}]

点击事件：

chart.addListener("clickGraphItem", function (event) {
    if (event.item.dataContext.subdata != undefined) {
        event.chart.dataProvider = event.item.dataContext.subdata;
        event.chart.validateData();
     }
 });

此示例显示如何更改图表类型 onclick：http://www.amcharts.com/tips/switching-chart-type-fly-serial-pie/

相关要点：您可以在屏幕上隐藏其他类型的图表，并点击让您在图表之间切换：

 document.getElementById('chartdiv').style.display = 'none';
 document.getElementById('chartdiv2').style.display = 'block';

双击，捕获以下事件：http://www.amcharts.com/tips/simulate-doubleclick-map-object/

指针：

 map.addListener("clickMapObject", function (event) {
     if ( false !== map.clickedObject && map.clickedObject === event.mapObject ) {
          // doubleckick
          map.clickedObject = false;
          alert('doubleclick');
     } else {
          clearTimeout( map.clickedObjectTimeout );
          map.clickedObject = event.mapObject;
          map.clickedObjectTimeout = setTimeout( function () {
               map.clickedObject = false;
               }, 500 );
      }
 });

最后说明：这些是您必须自己制定解决方案的一些提示。标记（几乎）直接取自链接示例，因此 event/element 名称将根据您的需要而变化。也许您至少可以开始使用这些。

如何在 amcharts 上制作交互式堆积条形图？

How do I make stacked bar chart on amcharts interactive?

javascript

amcharts