Highcharts – популярная библиотека JavaScript для создания интерактивных и визуально привлекательных диаграмм в Интернете. Хотя имена рядов могут быть полезны для предоставления контекста данным, в некоторых случаях может потребоваться удалить или скрыть имена рядов из диаграммы. В этой статье мы рассмотрим пять различных методов достижения этой цели с помощью Highcharts, а также примеры кода.

Метод 1: установка пустых названий серий
Один простой подход — установить пустые имена для серий. Присвоив в качестве имени пустую строку, названия серий не будут отображаться на графике. Вот пример:

Highcharts.chart('container', {
  series: [{
    name: '',
    data: [1, 2, 3, 4, 5]
  }]
});

Метод 2. Использование средства форматирования tooltip.
Highcharts предоставляет функцию форматирования tooltip, которая позволяет нам настраивать содержимое всплывающей подсказки. Мы можем использовать эту функцию, чтобы удалить названия серий из всплывающей подсказки. Вот пример:

Highcharts.chart('container', {
  tooltip: {
    formatter: function() {
      return this.y;
    }
  },
  series: [{
    name: 'Series 1',
    data: [1, 2, 3, 4, 5]
  }]
});

Метод 3: изменение легенды
Легенда — это еще один компонент диаграммы Highcharts, который по умолчанию отображает названия серий. Чтобы удалить названия серий из легенды, мы можем установить для свойства enabledзначение false. Вот пример:

Highcharts.chart('container', {
  legend: {
    enabled: false
  },
  series: [{
    name: 'Series 1',
    data: [1, 2, 3, 4, 5]
  }]
});

Метод 4. Использование CSS для скрытия названий серий
Вы также можете скрыть названия серий с помощью CSS, выбрав контейнер диаграммы Highcharts и применив стили к элементам легенды. Вот пример:

<style>
  .highcharts-legend-item span {
    display: none !important;
  }
</style>
<div id="container"></div>
<script>
  Highcharts.chart('container', {
    series: [{
      name: 'Series 1',
      data: [1, 2, 3, 4, 5]
    }]
  });
</script>

Метод 5: изменение параметров диаграммы
Highcharts предоставляет широкий спектр параметров для настройки внешнего вида диаграммы. Изменяя параметры диаграммы, мы можем скрыть названия серий на диаграмме. Вот пример:

Highcharts.chart('container', {
  chart: {
    events: {
      load: function() {
        this.series.forEach(function(series) {
          series.update({
            name: '',
            showInLegend: false
          }, false);
        });
        this.redraw();
      }
    }
  },
  series: [{
    name: 'Series 1',
    data: [1, 2, 3, 4, 5]
  }]
});

В этой статье мы рассмотрели пять различных способов удаления названий серий из диаграмм Highcharts. В зависимости от ваших конкретных требований вы можете выбрать метод, который лучше всего соответствует вашим потребностям. Highcharts предлагает гибкие возможности для достижения желаемого внешнего вида диаграммы, будь то установка пустых названий серий, изменение всплывающей подсказки, легенды, использование CSS или обновление параметров диаграммы.

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