你如何使用 amcharts4 來鑽取柱形圖

Question

我目前通過 amcharts4 有一個柱形圖的工作實現。 目前有充分記錄支持使用 amcharts3 ( https://codepen.io/team/amcharts/pen/6d37617fa24f57037b9f382e889ade4f ) 深入分析柱形圖，但在 amcharts4 中執行類似功能的指導很差。 我正在尋求幫助以使用 amcharts4 深入查看柱狀圖。 圖表當前正在呈現，但我的下面的事件偵聽器有問題，我需要幫助。 我的 amchart4 柱狀圖可以在 ( https://jsfiddle.net/x8vrftak/ ) 找到，下面的代碼需要修復，所以圖表的表現完全像 (( https://codepen.io/team/amcharts/pen/6d37617fa24f57037b9f382e889ade4f ) 一旦點擊一列

需要注意的 Javascript 代碼（事件監聽器）：（ https://jsfiddle.net/x8vrftak/ ）

am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data =

   [
       {
  "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": 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": 2011,
  "income": 30.1,
  "url": "#",
  "description": "click to drill-down",
  "months": [{
    "category": 1,
    "income": 2
  }, {
    "category": 2,
    "income": 3
  }, {
    "category": 3,
    "income": 1
  }]
}];



// Create axes

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
  if (target.dataItem && target.dataItem.index & 2 == 2) {
    return dy + 25;
  }
  return dy;
});

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "income";
series.dataFields.categoryX = "category";
series.name = "Income";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;

var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;


series.columns.template.events.on("hit", function(ev) {
    if('object' === typeof ev.target.dataItem.dataContext.months){

        // set the monthly data for the clicked month
         ev.chart.data = ev.target.dataItem.dataContext.months

        // update the chart title
        ev.chart.titles[0].text = ev.target.dataItem.dataContext.category + ' monthly data';


    }

 //console.log("clicked on ", ev.target.dataItem.dataContext.category);



}, this);



}); // end am4core.ready()

Answer 1

您可以通過事件目標的baseSprite訪問圖表對象並從那里更新圖表。 標題存儲在圖表的titles列表對象中，您首先需要在事件發生之前創建它，然后通過getIndex訪問它。

  var title = chart.titles.create();
  title.text = "Yearly Data";
  // ...
  series.columns.template.events.on("hit", function(ev) {
    if ('object' === typeof ev.target.dataItem.dataContext.months) {
      // update the chart title
      ev.target.baseSprite.titles.getIndex(0).text = ev.target.dataItem.dataContext.category + ' monthly data';
      // set the monthly data for the clicked month
      ev.target.baseSprite.data = ev.target.dataItem.dataContext.months

    }
  }, this);

如果您需要重置標簽，請在繪圖容器上創建一個並設置一個hit事件以將數據重置回基本狀態：

  var resetLabel = chart.plotContainer.createChild(am4core.Label);
  resetLabel.text = "[bold]<< Back to Yearly Data[/]";
  resetLabel.x = 35;
  resetLabel.y = 20;
  resetLabel.cursorOverStyle = am4core.MouseCursorStyle.pointer;
  resetLabel.hide(); //hide by default until drill down occurs
  resetLabel.events.on('hit', function(ev) {
    resetLabel.hide();
    ev.target.baseSprite.titles.getIndex(0).text = "Yearly Data";
    ev.target.baseSprite.data = chartData;
  });
  // ...
  series.columns.template.events.on("hit", function(ev) {
    if ('object' === typeof ev.target.dataItem.dataContext.months) {
      // ...
      // toggle the label on when drill down occurs
      resetLabel.show();
    }
  }, this);

演示如下：

 am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end // Create chart instance var chart = am4core.create("chartdiv", am4charts.XYChart); 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": 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": 2011, "income": 30.1, "url": "#", "description": "click to drill-down", "months": [{ "category": 1, "income": 2 }, { "category": 2, "income": 3 }, { "category": 3, "income": 1 }] }]; chart.data = chartData; // Create axes var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "category"; categoryAxis.renderer.grid.template.location = 0; categoryAxis.renderer.minGridDistance = 30; categoryAxis.numberFormatter.numberFormat = "#"; categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) { if (target.dataItem && target.dataItem.index & 2 == 2) { return dy + 25; } return dy; }); var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); // Create series var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueY = "income"; series.dataFields.categoryX = "category"; series.name = "Income"; series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]"; series.columns.template.fillOpacity = .8; series.columns.template.propertyFields.url = "url"; var columnTemplate = series.columns.template; columnTemplate.strokeWidth = 2; columnTemplate.strokeOpacity = 1; var title = chart.titles.create(); title.text = "Yearly Data"; var resetLabel = chart.plotContainer.createChild(am4core.Label); resetLabel.text = "[bold]<< Back to Yearly Data[/]"; resetLabel.x = 20; resetLabel.y = 20; resetLabel.cursorOverStyle = am4core.MouseCursorStyle.pointer; resetLabel.hide(); resetLabel.events.on('hit', function(ev) { resetLabel.hide(); ev.target.baseSprite.titles.getIndex(0).text = "Yearly Data"; ev.target.baseSprite.data = chartData; }); series.columns.template.events.on("hit", function(ev) { if ('object' === typeof ev.target.dataItem.dataContext.months) { // update the chart title ev.target.baseSprite.titles.getIndex(0).text = ev.target.dataItem.dataContext.category + ' monthly data'; // set the monthly data for the clicked month ev.target.baseSprite.data = ev.target.dataItem.dataContext.months resetLabel.show(); } }, this); });

 body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } #chartdiv { width: 100%; height: 500px; }

 <script src="https://www.amcharts.com/lib/4/core.js"></script> <script src="https://www.amcharts.com/lib/4/charts.js"></script> <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script> <div id="chartdiv"></div>