Question

当我使用高亮图标签时没有附带省略号样式。为此，我需要输入更多文本来默认实现。例如，标签文字＆＃34;非洲你好，你好吗？我很好。谢谢。你呢？怎么样？没什么特别的＆＃34;，它显示省略号为＆＃34;非洲你好你好哟...＆＃34;

但如果我删除＆＃34;没什么特别的＆＃34;只有以下句子，＆＃34;非洲你好，你好吗？我很好。谢谢。你呢？怎么样？＆＃34;，然后包装标签而不是应用省略号。

我已经尝试过格式化程序，但工具提示默认不会出现。

如果我使用，则使用HTML属性设计会崩溃。

请参阅以下代码。

＆＃13;

class IntegerAddImpl extends AbstractCalculation<Integer, Integer> {
    @Override
    public Integer calc(Integer t, Integer v) {
        return t + v;
    }
}
class StringAddImpl extends AbstractCalculation<String, String>{
    @Override
    public String calc(String t, String v) {
        return t + v;
    }
}

＆＃13;

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    xAxis: {
        categories: ['Africa hi hello how are you. I am fine. thank you. what about you? ho?', 'America', 'Asia', 'Europe', 'Oceania'],
        title: {
            text: null
        },
        labels:{
        formatter: function () {
            return this.value;
          }, style: {
            color: 'black',
           overflow:'none'
          }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        },
        
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
        stacking:'normal',
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 80,
        floating: true,
        borderWidth: 1,
        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
        shadow: true
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Year 1800',
        data: [107, 31, 635, 203, 2]
    }, {
        name: 'Year 1900',
        data: [133, 156, 947, 408, 6]
    }, {
        name: 'Year 2000',
        data: [814, 841, 3714, 727, 31]
    }, {
        name: 'Year 2016',
        data: [1216, 1001, 4436, 738, 40]
    }]
});

＆＃13;

Answer 1

请注意，在您提供的演示中，标签的外观取决于图表的大小。当宽度非常小时应用省略号。否则标签的单词就会被包裹。

您的示例为现场演示： http://jsfiddle.net/BlackLabel/c7f2oadg/

如果要确保省略号始终应用于长标签，请使用与下面类似的配置：

  style: {
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    width: 100,
  }

width这里导致省略号将用于所有超过100像素的标签。

现场演示： http://jsfiddle.net/BlackLabel/v213vwts/

API参考： https://api.highcharts.com/highcharts/xAxis.labels.style

包装高亮轴轴标签（没有适当的省略号）

1 个答案: