Responsive Highchart-Legendenposition

Question

Gibt es eine Möglichkeit, das Highcharts-Kreisdiagramm zu verwenden, um die Legende zu verkleinern, wenn die Bildschirmgröße klein ist. Bitte beachten Sie das beigefügte Bild als Referenz.

Hier ist ein Beispielbild, wenn der Bildschirm groß ist.

Dies würde, wie es aussieht, wenn sie in kleinem Bildschirm oder kleines Gerät

Ist das möglich zu erreichen? Danke für Ihre Hilfe.

Answer 1

Sie können die Fensterbreite vor dem Erstellen des Diagramms überprüfen und anhand dieser Informationen die Ausrichtung der Legende festlegen. Zum Beispiel (JSFiddle):

var isBig = $(window).width() > 700; 

var legendBig = { 
    align: 'right', 
    verticalAlign: 'middle', 
    layout: 'vertical' 
}; 

var legendSmall = { 
    align: 'center', 
    verticalAlign: 'bottom', 
    layout: 'horizontal' 
} 

$('#container').highcharts({ 
    legend: isBig? legendBig : legendSmall, 
    // ... 
}); 

Answer 2

Sie können CSS-Medienabfragen verwenden. Sie können die minimale Breite und die maximale Breite Ihres Bildschirms definieren.

Zum Beispiel, wenn Sie Stil auf ein Element hinzufügen müssen, wenn nur der Bildschirm kleiner als 320px ist, können Sie diese Art der Eigenschaft:

@media only screen and (max-width : 320px) { 
    /* Styles */ 
} 

Hier ist eine Geige, wo ich eine kleine Demo erstellt: https://jsfiddle.net/valentinho14/mkr2bgww/

Answer 3

Da Sie nach einem ansprechenden Layout fragen, habe ich eine kleine Geige gemacht, die auf das Größenänderungsereignis hört und sich entsprechend den Legendenattributen ändert.

Nicht sicher, ob es so gut funktionieren wird (die Legende in jeder Position müssen einige Einstellung kann), aber der Geist ist die folgende:

$(function() { 

    $(document).ready(function() { 
     $(window).resize(function() {      
      var chart = $('#container').highcharts(); 
      var isBig = chart.chartWidth > 450; 
      console.log(chart.chartWidth); 
      if (isBig) { 
       chart.legend.options.align = "right"; 
       chart.legend.options.verticalAlign = "middle"; 
       chart.legend.options.layout = "vertical"; 
       chart.isDirtyLegend = true; 
      } else { 
       chart.legend.options.align = "center"; 
       chart.legend.options.verticalAlign = "bottom"; 
       chart.legend.options.layout = "horizontal"; 
       chart.isDirtyLegend = true;     
      } 
     }); 



     // Build the chart 
     $('#container').highcharts({ 
      chart: { 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false, 
       type: 'pie'     
      }, 
      title: { 
       text: 'Browser market shares January, 2015 to May, 2015' 
      }, 
      tooltip: { 
       pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
      }, 
      legend: { 

      }, 
      plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: false 
        }, 
        showInLegend: true 
       } 
      }, 
      series: [{ 
       name: 'Brands', 
       colorByPoint: true, 
       data: [{ 
        name: 'Microsoft Internet Explorer', 
        y: 56.33 
       }, { 
        name: 'Chrome', 
        y: 24.03, 
        sliced: true, 
        selected: true 
       }, { 
        name: 'Firefox', 
        y: 10.38 
       }, { 
        name: 'Safari', 
        y: 4.77 
       }, { 
        name: 'Opera', 
        y: 0.91 
       }, { 
        name: 'Proprietary or Undetectable', 
        y: 0.2 
       }] 
      }] 
     }); 
      $(window).trigger("resize"); 
    }); 
}); 

Auf jeder die Größe der Diagrammbreite überprüft und, wenn sie unter eine ist Schwellenwert Die Legende ändert Positionsattribute.

Wenn das Diagramm neu gezeichnet wird (was es würde, wenn sein Container kleiner wird), wird die Legende korrekt gezeichnet.

Beispiel Geige: https://jsfiddle.net/9xfL6rz1/2/