你有什么好主意(设置)来显示高图表中有很多字符的标题吗？

Question

当这一节的标题中有太多的字符时，很难看到。因此，我想限制始终可见的部分中的字符数。另外，当鼠标悬停时，我希望能够在弹出窗口中看到标题中的所有字母。

这是我的小提琴

<script src="https://code.highcharts.com/7.1.1/highcharts.js"></script>
<script src="https://code.highcharts.com/7.1.1/modules/venn.js"></script>
<script src="https://code.highcharts.com/7.1.1/modules/exporting.js"></script>
<script src="https://code.highcharts.com/7.1.1/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

Highcharts.chart('container', {
  accessibility: {
    point: {
      descriptionFormatter: function(point) {
        var intersection = point.sets.join(', '),
          name = point.name,
          ix = point.index + 1,
          val = point.value;
        return ix + '. Intersection: ' + intersection + '. ' +
          (point.sets.length > 1 ? name + '. ' : '') + 'Value ' + val + '.';
      }
    }
  },
  tooltip: {
    pointFormat: 'data: {point.name}',
  },
  series: [{
    type: 'venn',
    name: 'ユーザー名',
    data: [{
      sets: ['Good'],
      value: 2,
      name: 'When there are too many characters in the title of this section, it is very difficult to see. Therefore, I would like to limit the number of characters in the part that is always visible. Also, I would like to be able to see all the letters of the title in the popup when the mouse is hovered.',
      overflow: 'allow',
      crop: false
    }, {
      sets: ['Cheap'],
      value: 2
    }, {
      sets: ['Good', 'Cheap'],
      value: 1,
    }]
  }],
  title: {
    text: 'The Unattainable Triangle'
  }
});

然而，https://www.highcharts.com/docs/chart-design-and-style/style-by-css#what-can-be-styled不能控制像标题或图例这样的元素的布局和位置。

我考虑过用CSS设计它的样式，但有人告诉我，不能用CSS控制title属性。

还有别的办法吗？

我想做什么

• 当名字有太多字符时，缩短它的名字。
• 悬停显示全文

Answer 1

对于dataLabel设置，使用dataLabels.style.textOverflow，可以在dataLabels.format中添加dataLabels.format标记，如果添加类，则可以更改dataLabels.format中的行为。

  plotOptions: {
    venn: {
      dataLabels: {
        useHTML: true,
        format: '<p class="truncate"><b>{point.name}</b></p>',
        style: {
          textOverflow: 'ellipsis'
        }
      }
    }
  },

https://api.highcharts.com/highcharts/plotOptions.venn.dataLabels