Удаление меток с диаграммы. js с помощью медиазапроса (или изменения значения параметра) - PullRequest
Новая
       4

Удаление меток с диаграммы. js с помощью медиазапроса (или изменения значения параметра)

0 голосов
/ 12 января 2020

Я использую 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 to 0 для достижения того, что я ищу, однако я не смог выяснить, как изменить это значение на 0 с помощью медиазапроса.

Я все еще изучаю JavaScript, поэтому не уверен, что лучший способ подойти к этому. Я нашел одну возможность - использовать window.matchMedia("(max-width: 756px)") и добавить слушателя. Я не смог заставить его работать, хотя.

Любая помощь будет принята с благодарностью. Спасибо.

1 Ответ

1 голос
/ 13 января 2020

Медиа-запрос был бы хорошей идеей, если бы он работал, но я этого не знаю.

У меня есть решение с chart.js, но я не знаю, хотите ли вы этого. Прямо сейчас я удаляю галочки полностью (включая линии сетки), если область графика достаточно мала. Если вы просто хотите скрыть галочки, вам нужно немного адаптировать код, как я делаю в строках, которые я прокомментировал.

Полный код: https://jsbin.com/lifubiriye/edit?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    
  }  
}
...