Как я могу добавить текстовую ссылку чуть ниже поля легенды в верхних чартах? - PullRequest
Новая
       14

Как я могу добавить текстовую ссылку чуть ниже поля легенды в верхних чартах?

1 голос
/ 29 марта 2020

Я хотел бы добавить текстовую ссылку чуть ниже последнего элемента вертикальной легенды на графике ap ie. Я пытался использовать функцию внутри LabelFormatter, но не имел опыта работы с javascript, чтобы выполнить эту функцию, как хотелось бы. Может ли кто-нибудь помочь, как выполнить sh это? 

Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: 'Browser market shares in January, 2018'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  accessibility: {
    point: {
      valueSuffix: '%'
    }
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false
      },
      showInLegend: true
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle',
    labelFormatter: function() {
      if (this.isLast) {
        return this + "<br> <a href=\"link\">Text</a>";
      }
    },
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Chrome',
      y: 61.41,
      sliced: true,
      selected: true
    }, {
      name: 'Internet Explorer',
      y: 11.84
    }, {
      name: 'Firefox',
      y: 10.85
    }, {
      name: 'Edge',
      y: 4.67
    }, {
      name: 'Safari',
      y: 4.18
    }, {
      name: 'Other',
      y: 7.05
    }]
  }]
});

Ответы [ 2 ]

1 голос
/ 29 марта 2020

Внутри функции labelFormatter у вас есть доступ к this.

? Как подсказка, если вы используете console.log(this) внутри функции, она отобразит на консоли отладчика все, что вы иметь доступ к.

Для вашего случая, если вы хотите узнать, находитесь ли вы на последнем элементе легенды, вы можете сравнить this.index (индекс легенды) с this.series.data.length - 1 (число элементов данных ... -1 потому, что индекс смещен в ноль).

Рабочий пример: https://codesandbox.io/s/javascript-stackoverflow-60908009-o3ftp

labelFormatter: function() {
  // if current legend is the last one
  // display the legend name
  // followed by a link on a second line
  if (this.index === this.series.data.length - 1) {
    return (
      this.name +
      '<br> <a style="color: #0c6def; text-decoration: underline;" href="link">Clickable link!</a>'
    );
  }
  // otherwise just display the legend name
  return this.name;
}

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

0 голосов
/ 15 апреля 2020

Вы можете добавить ссылку, используя Highcharts. SVGRenderer класс. Например: 

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

    this.renderer.text(
      '<a href="https://www.google.pl/">Google</a>',
      legendGroup.translateX + legend.padding,
      legendGroup.translateY + legend.legendHeight + legend.padding,
      true
    ).add();
  }
}

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4953/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

...