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

Question

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

例如，对于小于 480 像素的屏幕，我想在 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,
},

这里可以根据window的宽度修改axisY的标签。

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

您可以在此处看到有效的 fiddle。

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

Canvasjs: different settings according to screen size

javascript

jquery

canvasjs