Question

我们使用amchart实现了堆积条形图。我们在图表中展示了前五大畅销产品。下钻图表时，产品制造商的详细信息将显示在图表上。

Answer 1

当用户点击列时，您可以使用图表的事件clickGraphItem。然后动态更新图表的dataProvider属性并调用validateData()方法以接收新数据。

这是一个完整的工作演示。它有更多内容，而不仅仅是我上面提到的内容，例如更新当前级别的标签，以及后退按钮，以便向下钻取一个级别。

var chartData = [{
    "category": 2009,
    "income": 23.5,
    "url":"#",
    "description":"click to drill-down",
    "months": [
        { "category": 1, "income": 1 },
        { "category": 2, "income": 2 },
        { "category": 3, "income": 1 },
        { "category": 4, "income": 3 },
        { "category": 5, "income": 2.5 },
        { "category": 6, "income": 1.1 },
        { "category": 7, "income": 2.9 },
        { "category": 8, "income": 3.5 },
        { "category": 9, "income": 3.1 },
        { "category": 10, "income": 1.1 },
        { "category": 11, "income": 1 },
        { "category": 12, "income": 3 }
    ]
}, {
    "category": 2010,
    "income": 26.2,
    "url":"#",
    "description":"click to drill-down",
    "months": [
        { "category": 1, "income": 4 },
        { "category": 2, "income": 3 },
        { "category": 3, "income": 1 },
        { "category": 4, "income": 4 },
        { "category": 5, "income": 2 },
        { "category": 6, "income": 1 },
        { "category": 7, "income": 2 },
        { "category": 8, "income": 2 },
        { "category": 9, "income": 3 },
        { "category": 10, "income": 1 },
        { "category": 11, "income": 1 },
        { "category": 12, "income": 3 }
    ]
}, {
    "category": 2011,
    "income": 30.1,
    "url":"#",
    "description":"click to drill-down",
    "months": [
        { "category": 1, "income": 2 },
        { "category": 2, "income": 3 },
        { "category": 3, "income": 1 },
        { "category": 4, "income": 5 },
        { "category": 5, "income": 2 },
        { "category": 6, "income": 1 },
        { "category": 7, "income": 2 },
        { "category": 8, "income": 2.5 },
        { "category": 9, "income": 3.1 },
        { "category": 10, "income": 1.1 },
        { "category": 11, "income": 1 },
        { "category": 12, "income": 3 }
    ]
}];

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
        "theme": "none",
        "pathToImages": "/lib/3/images/",
        "autoMargins": false,
        "marginLeft": 30,
        "marginRight": 8,
        "marginTop": 10,
        "marginBottom": 26,
    "titles": [{
        "text": "Yearly data"
    }],
        "dataProvider": chartData,
        "startDuration": 1,
        "graphs": [{
        "alphaField": "alpha",
            "balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span> <br>[[description]]",
            "dashLengthField": "dashLengthColumn",
            "fillAlphas": 1,
            "title": "Income",
            "type": "column",
            "valueField": "income","urlField":"url"
    }],
        "categoryField": "category",
        "categoryAxis": {
            "gridPosition": "start",
            "axisAlpha": 0,
            "tickLength": 0
    }
});

chart.addListener("clickGraphItem", function (event) {
    if ( 'object' === typeof event.item.dataContext.months ) {
        
        // set the monthly data for the clicked month
        event.chart.dataProvider = event.item.dataContext.months;
        
        // update the chart title
        event.chart.titles[0].text = event.item.dataContext.category + ' monthly data';
        
        // let's add a label to go back to yearly data
        event.chart.addLabel(
            "!10", 25, 
            "Go back to yearly >",
            "right", 
            undefined, 
            undefined, 
            undefined, 
            undefined, 
            true, 
            'javascript:resetChart();');
        
        // validate the new data and make the chart animate again
        event.chart.validateData();
        event.chart.animateAgain();
    }
});

// function which resets the chart back to yearly data
function resetChart() {
    chart.dataProvider = chartData;
    chart.titles[0].text = 'Yearly data';
    
    // remove the "Go back" label
    chart.allLabels = [];
    
    chart.validateData();
    chart.animateAgain();
}

#chartdiv {
    width : 100%;
    height : 300px;
}

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

如何在Stacked Bar Chart（amchart）中实现向下钻取

1 个答案: