Блог

У меня есть простая линейная диаграмма с легендой, выровненной по правому краю. Ширина легенды устанавливается на основе содержимого элемента легенды, если содержимое не превышает 25% от ширины диаграммы, оно остается таким, как есть. Но если она превышает — применяется 25%. Код для этого находится здесь. Проблема в том, что я сталкиваюсь с ситуацией, когда текст легенды содержит длинную строку без пробелов между ними — например, PricewaterhouseCooper , текст обрезается — что является ожидаемым результатом на основе кода. Однако я хотел исключить этот сценарий и позволить ему превышать 25%, если есть строка, ширина которой больше 25%. У вас есть предложения, как лучше подойти к этой проблеме?

Спасибо!

Я предлагаю использовать пользовательский HTML-код легенды, чтобы использовать для него пользовательский стиль. Highchart может быть очень сильным в пользовательском стиле для вашей диаграммы.

Я создал эту скрипку для примера.

В моем примере я использовал «минимальную ширину» и «максимальную ширину» в зависимости от процента ширины вашего контейнера. Также разные «семейства шрифтов» могут приводить к разным результатам.

 <script src="https://code.highcharts.com/highcharts.js"></script>
<style>@import 'https://code.highcharts.com/css/highcharts.css';

 #container {
      min-width: 300px;
      max-width: 500px;
      height: 300px;
      margin: 1em auto;
 }
</style>
<div id="container"></div>
<script>
    Highcharts.chart('container', {
    chart: {
    styledMode: true,
    events: {
    load: function() {
    var chart = this,
      legend = chart.legend,
      legendMaxWidth =
        Highcharts.relativeLength(legend.options.maxWidth, 1) * chart.chartWidth;

        /*if (legend.legendWidth > legendMaxWidth) {
          legend.update({
            width: legend.options.maxWidth
          });
        }*/
      }
      }
    },
    legend: {
    align: 'right',
    layout: 'proximate',
    maxWidth: '25%',
    width: '25%',
    /* use custom html */
    useHTML: true,
    labelFormatter: function () {
        return '<span title="'   this.name   '" style="max-width:110px;min-width:75px;display:block;word-wrap: break-word;white-space: normal;letter-spacing: 0.5px;">'   this.name   '</span>';
    }
  },
  series: [{
  name: 'PricewaterhouseCoopers',
  data: [1, 4, 3, 5],
},{
  name: 'Pricewaterhouse Coopers copy',
  data: [2, 1, 0, 3],
},
{
  name: 'Deloitteverylongtexthere',
  data: [3, 5, 3, 1],
}
]
});

</script>