Canvasjs：根据屏幕尺寸的不同设置

Question

我使用CanvasJs作为条形图，但我希望根据屏幕尺寸进行不同的设置。

例如，我想将标签完全隐藏在屏幕< 480px的axisY上。如何才能做到这一点？

似乎媒体查询和CSS不能用于自定义图表。

下面是一个例子：

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

我尝试过这样的事情，这显然行不通：

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

Answer 1

可以定义axisY对象之外labelFormatter功能。

axisY: { 
    labelFormatter: axisYLabels, 
}, 

您可以根据窗口的宽度修改axisY的标签。

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

您可以在这里看到一个工作fiddle。