Amchart 4：如何在条形图中单击条形/列时突出显示条形/列

Question

我试图在 Amchart 4 中单击条形/列时突出显示条形/列。使用下面的代码，我获取当前单击的条形/列的值，但使用该column.isActive属性，条形/列不会突出显示。

\n

我找到了这个Amchart 官方文档链接，但它是关于单击轴标签的。我正在尝试实现相同的功能，但是单击条/列，而不是轴标签。

\n

这是代码实现：

\n

am4core.ready(function() {\n\n// Themes begin\nam4core.useTheme(am4themes_animated);\n// Themes end\n\n// Create chart instance\nvar chart = am4core.create("chartdiv", am4charts.XYChart);\n\n// Add data\nchart.data = [{\n  "country": "USA",\n  "visits": 2025\n}, {\n  "country": "China",\n  "visits": 1882\n}, {\n  "country": "Japan",\n  "visits": 1809\n}, {\n  "country": "Germany",\n  "visits": 1322\n}, {\n  "country": "UK",\n  "visits": 1122\n}];\n\n// Create axes\n\nvar categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());\ncategoryAxis.dataFields.category = "country";\ncategoryAxis.renderer.grid.template.location = 0;\ncategoryAxis.renderer.minGridDistance = 30;\n\ncategoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {\n  if (target.dataItem && target.dataItem.index & 2 == 2) {\n    return dy + 25;\n  }\n  return dy;\n});\n\nvar valueAxis = chart.yAxes.push(new am4charts.ValueAxis());\n\n// Create series\nvar series = chart.series.push(new am4charts.ColumnSeries());\nseries.dataFields.valueY = "visits";\nseries.dataFields.categoryX = "country";\nseries.name = "Visits";\nseries.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";\nseries.columns.template.fillOpacity = .8;\n\nvar columnTemplate = series.columns.template;\ncolumnTemplate.strokeWidth = 2;\ncolumnTemplate.strokeOpacity = 1;\n\n// Make a panning cursor\nchart.cursor = new am4charts.XYCursor();\nchart.cursor.behavior = "panXY";\nchart.cursor.snapToSeries = series;\n\nchart.events.on("hit", function(ev){\n chart.series.each(function(series) {\n \xc2\xa0 \xc2\xa0 if (series instanceof am4charts.ColumnSeries) {\n \xc2\xa0 \xc2\xa0 \xc2\xa0 series.columns.each(function(column) {\n \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 if (column.dataItem.categories.categoryX == series.tooltipDataItem.dataContext.country) {           \n           console.log(column.dataItem.categories.categoryX, series.tooltipDataItem.dataContext.country);\n \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 column.isActive = true;\n \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 } else {\n \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 column.isActive = false;\n \xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 }\n \xc2\xa0 \xc2\xa0 \xc2\xa0 })\n \xc2\xa0 \xc2\xa0 }\n \xc2\xa0 })\n})\n}); // end am4core.ready()\n

\n

现在，我还找到了这个stackoverflow帖子链接，但它与 Amchart 版本 3 库相关，而我正在使用 Amchart 4。

\n

请检查这个jfiddle实现。

\n

Answer 1

hit仅当您想要在激活单击的列时停用其他列时，您才不需要针对每个定义使用侦听器。您只需创建列并定义处于活动togglable状态的实际属性。

您必须使列可切换。

series.columns.template.togglable = true;

这会将活动状态从 切换false到true。可切换的

状态处于活动状态时的属性

var tActiveState = series.columns.template.states.create("active");
tActiveState.properties.strokeWidth = 0;
tActiveState.properties.fill = "crimson";

您必须设置活动状态的属性。状态

命中时停用其他列

series.columns.template.events.on("hit", function(event){
  series.columns.each(function(column){
    if(column !== event.target){
      column.setState("default");
      column.isActive = false
    }
  })
});

为此，我们将hit再次使用侦听器。事件监听器

基于您的代码的示例

var tActiveState = series.columns.template.states.create("active");
tActiveState.properties.strokeWidth = 0;
tActiveState.properties.fill = "crimson";

series.columns.template.events.on("hit", function(event){
  series.columns.each(function(column){
    if(column !== event.target){
      column.setState("default");
      column.isActive = false
    }
  })
});

或者，您可以跳过 togglable 并仅使用 hit

series.columns.template.events.on("hit", function(event){
  series.columns.each(function(column){
    //REM: Deactivate all non clicked columns
    if(column !== event.target){
      column.setState("default");
      column.isActive = false
    }
    //REM: Toggle the clicked column
    else{
      column.isActive = !column.isActive
    }
  })
});