Highchart图例文字太长,怎么换行显示啊?

时间:2021-09-05 14:44:56

$(function () {
        var chart;
        $(document).ready(function () {
            // Build the chart
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Browser market shares at a specific website, 2010'
                },
                legend: {
                    backgroundColor: '#FCFFC5',
                    borderColor: '#C98657',
                    borderWidth: 1,
                    width: 200,
                    itemWidth: 200,
                    itemDistance: 200,
                    itemStyle: {
                        color: 'red',
                        width: 200,
                        'word-break': 'break-all'
                    }
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',

                    data: [
                        ['FirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefoxFirefox', 45.0],
                        ['IEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIEIE', 26.8],
                        {
                            name: 'Chrome',
                            y: 12.8,
                            sliced: true,
                            selected: true
                        },
                        ['SafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafariSafari', 8.5],
                        ['OperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOperaOpera', 6.2],
                        ['OthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthersOthers', 0.7]
                    ]
                }]
            });
        });
    });

饼状图的图例文字太长了,在手机APP上显示不全,有没有一个属性能设置图例的宽度,超过宽度就自动换行的。。
Highchart图例文字太长,怎么换行显示啊?

3 个解决方案

#1



 legend: {
   图例容器的宽度          width: 400,   
  每个图例项的宽度          itemWidth: 70,
  }
不知道行不行
或者试试
layout: rtical 垂直排列在用maxHeight:设置最大高度

#2


useHTML 和 labelFormatter 结合看

#3


Highchart图例文字太长,怎么换行显示啊?
截取了一下字符串。。

#1



 legend: {
   图例容器的宽度          width: 400,   
  每个图例项的宽度          itemWidth: 70,
  }
不知道行不行
或者试试
layout: rtical 垂直排列在用maxHeight:设置最大高度

#2


useHTML 和 labelFormatter 结合看

#3


Highchart图例文字太长,怎么换行显示啊?
截取了一下字符串。。