Texte Ellipsis dans le tableau des bulles

Question

J'utilise graphique à bulles de Highcharts, le texte de l'étiquette à l'intérieur des bulles est dynamique et peut parfois être plus grande que la bulle elle-même,

Je me demande s'il y a un moyen de rendre le texte ellipses selon la taille de la bulle qui le contient?

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

Vous pouvez parcourir les étiquettes de données sur la charge/redessiner événement et ajouter/supprimer des points de suspension selon la largeur et la largeur du texte de la bulle.

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); 

    }); 
} 

Fixer la fonction de la charge/redessiner

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

exemple: http://jsfiddle.net/12d997o4/