文本省略號在氣泡圖

Question

我使用的氣泡圖從Highcharts，氣泡內的標籤文本是動態的，有時可能比泡沫本身更大，

我不知道是否有一種方法，使文本省略號根據包含它的氣泡的大小？

containerOptions = { 
     chart: { 
      type: 'bubble', 
      renderTo: $(container)[0], 
      events: { 
       drilldown: function (e) { 
        if (!e.seriesOptions) { 

         var chart = this, 
          drilldowns = { 
           'Animals': { 
            name: 'Animals', 
            data: [ 
             {name: 'Dogs', y:2, x:10, z: 7, drilldown: true}, 
             {name: 'Cats', y:4, x:12, z: 7} 
            ] 
           }, 
           'Dogs': { 
            name:"Dogs", 
            data: [ 
             {name: 'Pitbull', y:3.7, x:7.6, z: 5, drilldown: false}, 
             {name: 'German shepherd', y:6.7, x:6.9, z: 5, drilldown: false} 
            ] 
           } 
          }, 
          series = drilldowns[e.point.name]; 
         chart.showLoading('Loading..'); 
         setTimeout(function() { 
          chart.hideLoading(); 
          chart.addSeriesAsDrilldown(e.point, series); 
         }, 1000); 

        } 
       } 
      } 
     }, 
     plotOptions: { 
      series: { 
       borderWidth: 0, 
       dataLabels: { 
        enabled: true, 
        style: { color: 'red' }, 
        format: '{point.name}' 

       } 
      } 
     }, 
     series: [{ 
      name: 'Things', 
      colorByPoint: true, 
      data: [{ 
       name: 'Animals', 
       y: 5, 
       x: 1, 
       z: 9, 
       drilldown: true 
      }, { 
       name: 'Fruits', 
       y: 2, 
       x: 9, 
       z: 9, 
       drilldown: false 
      } 
      ] 
     }], 

     drilldown: { 
      series: [], 
      drillUpButton: { 
       relativeTo: 'spacingBox', 
       position: { 
        y: 0, 
        x: 0 
       } 
      } 
     } 

    } 
} 

Answer 1

可以通過對負載數據標籤環路/重繪事件和添加/根據氣泡的寬度和文本的寬度除去省略號。

function applyEllipsis() { 
    var series = this.series[0]; 
    var options = series.options.dataLabels; 

    series.points.forEach(p => { 
    var r = p.marker.radius; 
    var label = p.dataLabel; 
    var text = label.text.textStr; 
    var bbox = label.getBBox(true); 

    while (bbox.width > 2 * r && text.length !== 1) { 
     text = text.slice(0, -1); 
     p.dataLabel.attr({ 
     text: text + '\u2026' 
     }); 
     bbox = label.getBBox(true); 
    } 

    p.dataLabel.align({ 
     width: bbox.width, 
     height: bbox.height, 
     align: options.align, 
     verticalAlign: options.verticalAlign 
    }, null, p.dlBox); 

    }); 
} 

連接負載的功能/重繪

Highcharts.chart('container', { 
    chart: { 
    type: 'bubble', 
    events: { 
     load: applyEllipsis, 
     redraw: applyEllipsis 
    } 
    }, 

例如：http://jsfiddle.net/12d997o4/