Canvasjs：根據屏幕尺寸的不同設置

我使用CanvasJs作爲條形圖，但我希望根據屏幕尺寸進行不同的設置。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 ""; 
    }, 
    }, 
},

來源

2017-05-08 Meek

可以定義axisY對象之外labelFormatter功能。

axisY: { 
    labelFormatter: axisYLabels, 
},

您可以根據窗口的寬度修改axisY的標籤。

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

您可以在這裏看到一個工作fiddle。

來源

2017-05-09 08:15:21 Beevk

輝煌，謝謝。但是當屏幕寬度超過480像素時，如何顯示初始標籤值？此時函數返回的是索引號「e.value」，而不是標籤文本。看到這裏的例子：[鏈接]（http://jsfiddle.net/amp7nms1/1/） – Meek

返回** e.label **，而這將做到這一點。 – Beevk

太棒了，謝謝。 – Meek

Canvasjs：根據屏幕尺寸的不同設置

回答

相關問題