Canvasjs: verschiedene Einstellungen nach Bildschirmgröße

Question

Ich benutze CanvasJs für ein Balkendiagramm, aber ich hätte gerne verschiedene Einstellungen je nach Bildschirmgröße.

Zum Beispiel möchte ich Etiketten vollständig auf der Achse Y für Bildschirme < 480px verstecken. Wie kann das gemacht werden?

Es scheint, dass Medienabfragen und CSS nicht zum Anpassen der Diagramme verwendet werden können.

Hier ist ein Beispiel:

<script type="text/javascript"> 
    window.onload = function() { 
     var chart = new CanvasJS.Chart("chartContainer", { 
      title: { 
       text: "Understanding Labels" 
      }, 
      axisY: { 
       labelFontSize: 20 
      }, 
      axisX: { 
       labelAngle: -30 
      }, 
      data: [ 
      { 
       type: "column", 
       dataPoints: [ 
       { y: 10, label: "Apples" }, 
       { y: 15, label: "Mangos" }, 
       { y: 25, label: "Oranges" }, 
       { y: 30, label: "Grapes" }, 
       { y: 28, label: "Bananas" } 
       ] 
      } 
      ] 
     }); 

    chart.render(); 
    } 
</script> 

ich mit so etwas wie dies experimentiert, die offensichtlich nicht funktioniert:

axisY: { 
    labelFormatter: function(e) { 
    if ($(window).width() < 480) { 
     return ""; 
    }, 
    }, 
}, 

Answer 1

Sie können außerhalb von axisY Objekt eine Funktion für labelFormatter definieren.

axisY: { 
    labelFormatter: axisYLabels, 
}, 

Sie können die Beschriftungen von axisY hier basierend auf der Breite des Fensters ändern.

function axisYLabels(e) { 
    if ($(window).width() < 480) { 
     return ""; 
    } else { 
     return e.value; 
    } 
} 

Sie können eine Arbeits fiddle hier sehen.