Amchart 4: Как выделить столбец / столбец при щелчке по столбцу / столбцу на графиках столбцов - PullRequest
Новая
       28

Amchart 4: Как выделить столбец / столбец при щелчке по столбцу / столбцу на графиках столбцов

2 голосов
/ 11 июля 2020

Я пытаюсь выделить полосу / столбец при щелчке полосы / столбца в Amchart 4. Используя приведенный ниже код, я получаю значение текущего столбца / столбца, по которому щелкнули, но с помощью свойства column.isActive, полосы / столбца не выделяется.

Я нашел эту официальную документацию Amchart ссылку, но она касается щелчка по метке оси. Я пытаюсь реализовать то же самое, но по щелчку полосы / столбца, а не метки оси.

Это реализация кода: 

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 = [{
  "country": "USA",
  "visits": 2025
}, {
  "country": "China",
  "visits": 1882
}, {
  "country": "Japan",
  "visits": 1809
}, {
  "country": "Germany",
  "visits": 1322
}, {
  "country": "UK",
  "visits": 1122
}];

// Create axes

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
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 = "visits";
series.dataFields.categoryX = "country";
series.name = "Visits";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;

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

// Make a panning cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panXY";
chart.cursor.snapToSeries = series;

chart.events.on("hit", function(ev){
 chart.series.each(function(series) {
     if (series instanceof am4charts.ColumnSeries) {
       series.columns.each(function(column) {
         if (column.dataItem.categories.categoryX == series.tooltipDataItem.dataContext.country) {           
           console.log(column.dataItem.categories.categoryX, series.tooltipDataItem.dataContext.country);
           column.isActive = true;
         } else {
           column.isActive = false;
         }
       })
     }
   })
})
}); // end am4core.ready()

Теперь я также нашел этот stackoverflow ссылка для публикации, но это было связано с библиотекой Amchart версии 3, и я использую Amchart 4.

Пожалуйста, проверьте эту jfiddle реализацию.

Ответы [ 2 ]

3 голосов
/ 13 июля 2020

Вам не требуется прослушиватель 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 слушатель. Слушатели событий

Пример на основе вашего кода 

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 = [{
    "country": "USA",
    "visits": 2025
  }, {
    "country": "China",
    "visits": 1882
  }, {
    "country": "Japan",
    "visits": 1809
  }, {
    "country": "Germany",
    "visits": 1322
  }, {
    "country": "UK",
    "visits": 1122
  }];

  // Create axes

  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "country";
  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 = "visits";
  series.dataFields.categoryX = "country";
  series.name = "Visits";
  series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
  series.columns.template.fillOpacity = .8;

  //REM: Making the columns togglable.
  series.columns.template.togglable = true;

  //REM: Setting the properties of the "hover" state
  var tHoverState = series.columns.template.states.create("hover");
  tHoverState.properties.strokeWidth = 1;
  tHoverState.properties.fill = "yellow";

  //REM: Setting the properties of the active state "isActive=true"
  var tActiveState = series.columns.template.states.create("active");
  tActiveState.properties.strokeWidth = 0;
  tActiveState.properties.fill = "crimson";

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

  // Make a panning cursor
  chart.cursor = new am4charts.XYCursor();
  chart.cursor.behavior = "panXY";
  chart.cursor.snapToSeries = series;

  //REM: To deactivate other columns on click
  series.columns.template.events.on("hit", function(event){
    series.columns.each(function(column){
      if(column !== event.target){
        column.setState("default");
        column.isActive = false
      }
    })
  });

}); // end am4core.ready()
<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>

В качестве альтернативы вы можете пропустить переключение и использовать только хит 

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
    }
  })
});
0 голосов
/ 13 июля 2020

Я не уверен, есть ли у amchart api для этого или нет, но поскольку он основан на svg, мы можем легко установить стиль для выбранного столбца, например this 

column.element.node.parentNode.setAttribute('fill', highLightColor);           
column.element.node.parentNode.setAttribute('stroke', highLightStrokeColor);
...