Canvasjs：画面サイズに応じて異なる設定

Question

私はCanvasJsを棒グラフに使用していますが、画面サイズに応じて異なる設定をしたいと思います。

たとえば、ラベル480pxの場合、軸Y上にラベルを完全に隠したいとします。これはどうすればできますか？

メディアクエリと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が表示されます。