Javascript 使用媒体查询从chart.js中删除标签（或更改选项值）

我使用的是Django，视图中有一个条形图，如下所示：

index.html

<script>
    $(document).ready(function(){
        var ctx = document.getElementById('pollingBarChart');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [{% for c in categories %}"{{ c.name }}",{% endfor %}],
                datasets: [{
                    label: '# of Votes',
                    data: [{% for a in active_votes %}
                            {{ a }},
                            {% endfor %}],
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            fontColor: 'white',
                            callback: function(value) {if (value % 1 === 0)
                                {return value;}}
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            fontColor: 'white',
                            fontSize: 12,

                        }
                    }],
                },
                legend: {
                    labels: {
                        fontColor: 'white'
                    },
                },

            }
        });

    });
</script>

我已经知道我可以将xAxes->ticks->fontSize设置为0来实现我想要的，但是我还没有弄清楚如何通过媒体查询将该值更改为0

我还在学习JavaScript，所以不确定最好的方法。我发现的一种可能性是使用window.matchMediamax-width:756px并添加一个侦听器。但是我没能让它工作

---

任何帮助都将不胜感激。谢谢。

媒体查询如果有效的话是个好主意，但我不知道

我有一个关于chart.js的解决方案，但我不知道这是否是您想要的。现在，如果图表区域足够小，我会完全删除刻度，包括网格线。如果你只是想隐藏记号，你需要调整代码，就像我在我评论的行中所做的那样

完整代码：

重要部分：

function setChartWidth() {
  chartWidth = document.getElementById("chart").width

  if (chartWidth < 756) {
    myChart.options.scales.xAxes[0].display = false
  } else {
    myChart.options.scales.xAxes[0].display = true    
  }  
}