高图表的文本溢出问题

Text overflow issue with highcharts

本文关键字：出问题 溢出 文本 高图表      更新时间：2023-09-26

我想知道如何制作高图表图例剪辑中的文本，或者在一定数量的字符后制作省略号。我知道我可以设置传奇风格，但不确定如何使其在这种情况下工作

http://jsfiddle.net/t96zj1yr/

'hidden',$(function () {
    $('#container').highcharts({
        chart: {
            marginBottom: 120,
            width: 500
        },
        legend: {
            itemWidth: 100,
            itemStyle: {
                color: '#7CB57C',
                fontWeight: 'bold',
                width: '70px',
                textOverflow: "ellipsis",
                overflow: "hidden",
                whiteSpace: "nowrap"
            },
            useHTML: true
        },
        series: [{
            data: [6, 4, 2],
            name: 'Firstasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf'
        }, {
            data: [7, 3, 2],
            name: 'Second'
        }, {
            data: [9, 4, 8],
            name: 'Third'
        }, {
            data: [1, 2, 6],
            name: 'Fourth'
        }, {
            data: [4, 6, 4],
            name: 'Fifth'
        }, {
            data: [1, 2, 7],
            name: 'Sixth'
        }, {
            data: [4, 2, 5],
            name: 'Seventh'
        }, {
            data: [8, 3, 2],
            name: 'Eighth'
        }, {
            data: [4, 5, 6],
            name: 'Ninth'
        }]
    });
});

任何帮助都将不胜感激！！感谢

使用maxWidth: '70px'而不是width: '70px'。

您应该能够将图例的项目样式设置为包含

max-width: 10ch;

应该大约有几个字符

编辑：您可以使用Jquery根据跨度内容中的字符数编辑跨度的内容。这应该为第10个字符之后超过10个字符的任何字符添加省略号。

$('.highcharts-legend-item').find('span').each(function() {
  var content = $(this).html();
  if(content.length > 10)
  {
      $(this).html(content.substring(0, 10) + "...");
  }
});

试试看——你只需要将角色限制更改为所需的长度。似乎运行良好

相关文章：