javascript - 使用媒体查询从 Chart.js 中删除标签(或更改选项值)

Question

我正在使用 Django，并且在 View 中有一个条形图，如下所示:

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.matchMedia("(max-width: 756px)") 并添加一个监听器。但我没能让它发挥作用。

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

Answer 1

如果媒体查询有效，那将是一个好主意，但我不知道。

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

完整代码:https://jsbin.com/lifubiriye/edit?js,output

重要部分:

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