Text Auslassungspunkte in Blasendiagramm

Question

ich verwende Blasendiagramm von Highcharts, das Etikett Text innerhalb der Blasen ist dynamisch und kann manchmal größer als die Blase selbst,

Ich frage mich, ob es einen Weg gibt, um den Text zu machen Ellipse nach der Größe der Blase, die es enthalten?

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

Sie können Schleife durch die Datenetiketten auf Lade-/Neuzeichnen Ereignis und Hinzufügen/Entfernen von Auslassungs entsprechend der Breite der Blase und der Breite des Textes.

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

    }); 
} 

Bringen Sie die Funktion auf Last/

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

Beispiel neu gezeichnet: es hat nicht funktioniert http://jsfiddle.net/12d997o4/