Wie wird der Name der Daten in Highcharts Kreisdiagramm-Legende anstelle von "Slice" mit einem Array von Werten abgerufen?

Ich erstelle ein Tortendiagramm in Highcharts mit einer Legende. Wenn ich die Reihe als ein Array von Werten festlege (meine bevorzugte Methode), zeigt die Legende für jeden Wert die Zeichenfolge "Slice" an. Wenn ich stattdessen die Reihe als eine Liste von Objekten mit benannten Werten angeben, sehe ich die Datennamen korrekt. Kann ich die Datennamen sehen, wenn ich die Reihe als ein Array von Werten festlege? HierWie wird der Name der Daten in Highcharts Kreisdiagramm-Legende anstelle von "Slice" mit einem Array von Werten abgerufen?

ist der Code, der nicht funktioniert, sondern dass ich verwenden möchte:

<html> 
<head> 
<title>HighCharts pie</title> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script> 
Highcharts.setOptions({  
    lang: {     
     decimalPoint: '.', 
     thousandsSep: ',' 
    }      
});       
$(function() {     
    $('#container').highcharts({ 
     chart: {     
      type: 'pie',   
      height: '500',   
      width: '750',   
      borderColor: '#EBBA95', 
      borderWidth: 2   
     },       
     plotOptions: {          
      pie: {           
       allowPointSelect: true,     
       cursor: 'pointer', 
       showInLegend: true, 
       dataLabels: {        
        enabled: true,       
        format: '{point.y:,.0f}'    
       }           
      }            
     },             
     title: {           
      text: 'Rental Amounts for Paramount Directors' 
     },             
     legend: {           
      enabled: true         
     },             
     xAxis: {                 
      categories: ["BADHAM, J", "COPPOLA, F", "GUILERMAN, J", "HILLER, A", 
         "SPIELBERG, S"],          
     },   
     series: [{              
      name: 'Directors',           
      data: [74100000, 30673000, 36915000, 50000000, 90434000], 
     }]                
    });        
});         
</script>              
</head>              
<body>              
<div id="container" style="width:600px; height:400px;"></div> 
</body>              
</html>

Hier ist der Code, das funktioniert, wenn ich die Serie als eine Liste von Objekten mit dem Namen Werte angeben:

<html> 
<head> 
<title>HighCharts pie</title> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script> 
Highcharts.setOptions({  
    lang: {     
     decimalPoint: '.', 
     thousandsSep: ',' 
    }      
});       
$(function() {     
    $('#container').highcharts({ 
     chart: {     
      type: 'pie',   
      height: '500',   
      width: '750',   
      borderColor: '#EBBA95', 
      borderWidth: 2   
     },       
     plotOptions: {          
      pie: {           
       allowPointSelect: true,     
       cursor: 'pointer', 
       showInLegend: true,      
       dataLabels: {        
        enabled: true,       
        format: '{point.y:,.0f}'    
       }           
      }            
     },             
     title: {           
      text: 'Rental Amounts for Paramount Directors' 
     },             
     legend: {           
      enabled: true         
     },             
     series: [{           
      name: "Directors",        
      slicedOffset: 20,        
      data: [{  
       name: "BADHAM, J",       
       y: 74100000        
      }, {     
       name: "COPPOLA, F",       
       y: 30673000        
      }, {     
       name: "GUILERMAN, J",      
       y: 36915000        
      }, {      
       name: "HILLER, A",  
       y: 50000000   
      }, {      
       name: "SPIELBERG, S", 
       y: 90434000   
      }]     
     }]       
    });        
});         
</script>              
</head>              
<body>              
<div id="container" style="width:600px; height:400px;"></div> 
</body>              
</html>

Quelle

2016-05-11 S. Willner

Sie können dies mit tooltip.formatter und legend.labelFormatter und Zugriff auf die Highchart-Optionen tun.

Für den Tooltip-Text:

tooltip: { 
    formatter: function() { 
    var sliceIndex = this.point.index; 
    var sliceName = this.series.chart.axes[0].categories[sliceIndex]; 
    return 'The value for <b>' + sliceName + 
     '</b> is <b>' + this.y + '</b>'; 
    } 
},

Und für die Legende:

legend: { 
    enabled: true, 
    labelFormatter: function() { 
    var legendIndex = this.index; 
    var legendName = this.series.chart.axes[0].categories[legendIndex]; 

    return legendName; 
    } 
},

Live-demo.

Quelle

2016-05-11 14:12:20 wergeld

Funktioniert perfekt! Vielen Dank! –

Wie wird der Name der Daten in Highcharts Kreisdiagramm-Legende anstelle von "Slice" mit einem Array von Werten abgerufen?

Antwort

Verwandte Themen