Question

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

'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'
        }]
    });
});

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

Answer 1

使用maxWidth: '70px'代替width: '70px'。

Answer 2

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

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) + "...");
  }
});

给它一个旋转 - 你只需要将字符限制改为所需的长度。似乎工作正常

highcharts的文本溢出问题

2 个答案: