如何在AmCharts 4中仅显示一个系列

时间:2019-06-07 10:28:53

标签: legend amcharts series

当我从图例中单击某个人时,我正在使用下面的“ handleLegendClick”函数隐藏该系列的其余部分,但是我不确定如何在amcharts 4上调用此事件。

在amcharts 3中,以前是这样的:

  

“传奇”:{

     
    

“ clickMarker”:handleLegendClick,

  

它将调用下面的函数。

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

// Add data
chart.data = [ {
  "year": "2003",
  "europe": 2.5,
  "namerica": 2.5,
  "asia": 2.1,
  "lamerica": 1.2,
  "meast": 0.2,
  "africa": 0.1
}, {
  "year": "2004",
  "europe": 2.6,
  "namerica": 2.7,
  "asia": 2.2,
  "lamerica": 1.3,
  "meast": 0.3,
  "africa": 0.1
}, {
  "year": "2005",
  "europe": 2.8,
  "namerica": 2.9,
  "asia": 2.4,
  "lamerica": 1.4,
  "meast": 0.3,
  "africa": 0.1
} ];



// Create axes
//chart.legend.horizontalGap=10;
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.title.text = "Local country offices";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.9;

var  valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.title.text = "Expenditure (M)";

// Create series
function createSeries(field, name, stacked, hidden) {
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueY = field;
  series.dataFields.categoryX = "year";
  series.name = name;
  series.columns.template.tooltipText = "{name}: [bold]{valueY}[/]";
  series.stacked = stacked;
  series.columns.template.width = am4core.percent(95);
  series.hidden = hidden;
}

createSeries("europe", "Europe", true, false);
createSeries("namerica", "North America", true, true);
createSeries("asia", "Asia", true, true);
createSeries("lamerica", "Latin America", true, true);
createSeries("meast", "Middle East", true, true);
createSeries("africa", "Africa", true, true);

// Add legend
chart.legend = new am4charts.Legend();


function handleLegendClick( graph ) {
  var chart = graph.chart;
  for( var i = 0; i < chart.graphs.length; i++ ) {
    if ( graph.id == chart.graphs[i].id )
      chart.showGraph(chart.graphs[i]);
    else
      chart.hideGraph(chart.graphs[i]);
  }
    // return false so that default action is canceled
  return false;
}

am4core.useTheme(am4themes_animated); // Themes end // Create chart instance var chart = am4core.create("chartdiv", am4charts.XYChart); // Add data chart.data = [ { "year": "2003", "europe": 2.5, "namerica": 2.5, "asia": 2.1, "lamerica": 1.2, "meast": 0.2, "africa": 0.1 }, { "year": "2004", "europe": 2.6, "namerica": 2.7, "asia": 2.2, "lamerica": 1.3, "meast": 0.3, "africa": 0.1 }, { "year": "2005", "europe": 2.8, "namerica": 2.9, "asia": 2.4, "lamerica": 1.4, "meast": 0.3, "africa": 0.1 } ]; // Create axes //chart.legend.horizontalGap=10; var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "year"; categoryAxis.title.text = "Local country offices"; categoryAxis.renderer.grid.template.location = 0; categoryAxis.renderer.minGridDistance = 20; categoryAxis.renderer.cellStartLocation = 0.1; categoryAxis.renderer.cellEndLocation = 0.9; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); valueAxis.min = 0; valueAxis.title.text = "Expenditure (M)"; // Create series function createSeries(field, name, stacked, hidden) { var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueY = field; series.dataFields.categoryX = "year"; series.name = name; series.columns.template.tooltipText = "{name}: [bold]{valueY}[/]"; series.stacked = stacked; series.columns.template.width = am4core.percent(95); series.hidden = hidden; } createSeries("europe", "Europe", true, false); createSeries("namerica", "North America", true, true); createSeries("asia", "Asia", true, true); createSeries("lamerica", "Latin America", true, true); createSeries("meast", "Middle East", true, true); createSeries("africa", "Africa", true, true); // Add legend chart.legend = new am4charts.Legend(); function handleLegendClick( graph ) { var chart = graph.chart; for( var i = 0; i < chart.graphs.length; i++ ) { if ( graph.id == chart.graphs[i].id ) chart.showGraph(chart.graphs[i]); else chart.hideGraph(chart.graphs[i]); } // return false so that default action is canceled return false; }

我正在使用:

  

series.hidden =隐藏;

将其设置为true或false。

但是我需要知道在这里使用哪个监听器。

0 个答案:

没有答案