Highcharts добавить кнопку после всех легенд

Question

У меня есть общая функция для отображения двух пончиковых диаграмм.Мне нужно добавить легенду, чтобы перезагрузить полную диаграмму.Я использую labelFormatter для отображения с символами и значками.Если я добавляю кнопку в конце диапазона, она повторяется для каждого элемента в списке.Пожалуйста, помогите исправить это.

  const donutChartFactory = (id, el, chartSettings,elementSettings,dataValueAttribute) => {
    const { series, title } = generateChartData(id,"",dataValueAttribute);
    legend: {
  margin: 0,
  layout: 'vertical',
  itemStyle: {
    fontSize: '16px',
    fontWeight: 'normal'
  },
  symbolWidth: 0.1,
  symbolHeight: 0.1,
  symbolPadding: 0,
  symbolRadius: 0,
  useHTML: true,
  align: 'center',
  verticalAlign: 'bottom',
  backgroundColor: '#eee',
  labelFormatter: function () { // eslint-disable-line object-shorthand
    const value = this.y;
    const formattedValue = formatNumber(this.y, 'decimal', 0);

    const key = this.name;
    const { color, icon } = this;
    let prefix = '';

    if (csettings.dataType === 'currency') {
      prefix = '$';
    }

    let symbol = '';

    if (icon) {
      symbol = `<span class="r-pie-legend-item__color" style="color: ${color}">${icon}</span>`;
    } else {
      symbol = `
        <span class="r-pie-legend-item__color" style="background-color: ${color}">
          <span class="r-pie-legend-item__rect"></span>
        </span>
      `;
    }

    return `
    <span class="r-pie-legend-item">
      <span class="r-pie-legend-item__symbol">${symbol}</span>
      <span class="r-pie-legend-item__key">${key}</span>
      <span class="r-pie-legend-item__value">
        <span class="r-pie-legend-item__value-prefix">${prefix}</span>
        <span
          class="number-counter number-counter--chart number-counter--chart-legend"
          data-counter-start="0"
          data-counter-end="${value}"
          data-counter-duration="2"
          data-counter-deferred="true"
        >${formattedValue}</span>
      </span>
    </span>
     <button>Button Action</button>
  `;
  }
},

Пожалуйста, найдите изображение Графики

Answer 1

Во-первых, вам нужно создать пространство для кнопок, чтобы вы могли использовать свойство itemMarginTop для легенды.Затем вы используете Highcharts.SVGRenderer для рендеринга кнопок в рассчитанных местах:

        events: {
            load: function() {
                var legend = this.legend.group;

                Highcharts.each(this.legend.allItems, function(item) {
                    var x = legend.translateX + item.legendGroup.translateX,
                        y = this.legend.contentGroup.getBBox().y + legend.translateY + item.legendGroup.translateY + item.itemHeight;

                    this.renderer
                        .button(
                            'button',
                            x,
                            y,
                            function() {
                                console.log('click')
                            }
                        )
                        .add();
                }, this);
            }
        }

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/brf4cLj8/

API:

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button

https://api.highcharts.com/highcharts/legend.itemMarginTop