Как сделать легенду AmCharts 4 с переключаемым флажком

Я пытаюсь настроить диаграммы AmCharts 4 с легендой флажка.

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

        // add legend
        this.chart.legend = new am4charts.Legend();
        this.chart.legend.useDefaultMarker = true;

        // Remove square from marker template
        const marker = this.chart.legend.markers.template;
        marker.disposeChildren();

        // Add custom image instead
        const checkbox = marker.createChild(am4core.Image);
        checkbox.width = 40;
        checkbox.height = 40;
        checkbox.verticalCenter = "top";
        checkbox.horizontalCenter = "left";
        checkbox.adapter.add("href", (href: any, target: any) => {
            if(!target.dataItem.dataContext.isHidden) {
                return "http://cdn.onlinewebfonts.com/svg/img_207414.png";
            }
            else {
                return '';
            }
        });

reactjs amcharts4
person Nikolay Krastev    schedule 18.06.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я бы сохранил исходный квадрат маркера и просто настроил его так:

  1. поддерживать существующее поведение взаимодействия,
  2. формируют ограничивающий прямоугольник для флажка (примечание: его изображение флажка изображение галочки не имеет ограничивающей рамки).

Когда элемент легенды переключается, его объекты меняются на "active" State . Поэтому вместо того, чтобы пытаться использовать адаптер на href вашего Image, создайте для него "active" State, в котором его opacity установлен на 0.

Опуская адаптер (и регулируя размер изображения и / или квадрата маркера, чтобы они совпадали), вот дополнительный код:

  const markerColumn = marker.children.getIndex(0);

  // Optionally straighten out the square
  markerColumn.cornerRadius(0, 0, 0, 0);
  // Hide the square
  markerColumn.defaultState.properties.fillOpacity = 0;
  // Form the bounding box
  markerColumn.defaultState.properties.strokeWidth = 1;
  markerColumn.defaultState.properties.stroke = am4core.color("#000");
  markerColumn.defaultState.properties.strokeOpacity = 1;

  // After your checkbox code... again, omit/comment out the href adapter
  checkbox.href = "https://cdn.onlinewebfonts.com/svg/img_207414.png";
  checkbox.dx = 1;
  checkbox.dy = 1;

  const checkboxActiveState = checkbox.states.create("active");
  checkboxActiveState.properties.opacity = 0;

Демо:

https://codepen.io/team/amcharts/pen/89495edd36c6bf90d57262e2e2

Скриншот:

снимок экрана как активного элемента, так и элемента легенды состояния по умолчанию, в последнем отображается галочка

person notacouch    schedule 19.06.2019
comment
В моем случае это отлично сработало. Большое спасибо, сэр! - person Nikolay Krastev; 19.06.2019