Я работал над своим личным веб-сайтом и обнаружил, что хочу показать множество языков программирования/программ, о которых у меня есть смутные знания, притворяясь, что я выше уровня inurl: stackoverflow. . Конечно, все знают, именно для этого и нужны эти "таблицы навыков".

Расположение

Я полностью согласен с всеобъемлющей темой этого вопроса StackOverflow: диаграммы навыков, основанные на процентах, не имеют абсолютно никакого смысла. Что, черт возьми, должно означать Python: 80%? Вы знаете 80% документации по Python? Мы говорим о 2 или 3? Можете ли вы применить то, что вы помните из этих документов? Почему мы здесь?

Конечно, гораздо лучше создать помеченную диаграмму, в которой используются очень конкретные термины, такие как «новичок», «средний уровень» и «продвинутый», чтобы точно передать ваш уровень навыков. Поэтому я приступил к созданию именно этого.

Примечание. Я понимаю, что на самом деле это ужасная идея, но я понял это только после нескольких часов головной боли ChartJS. В соответствии с вековой традицией моих блог-постов, я пишу об этом на тот случай, если «кому-то еще это может пригодиться».

Итак, без лишних слов, давайте поговорим о том, как сделать диаграммы ChartJS с метками по обеим осям!

Документация и первые попытки

Конечно, первая остановка — это документация. Я остановился на горизонтальной гистограмме, где по оси ординат — разные языки программирования, а по оси абсцисс — уровень навыков. К счастью, в документации говорится, что ChartJS поддерживает именно это! И цитирую:

Совместное использование xLabels и yLabels позволяет создать диаграмму, в которой строки используются как для осей X, так и для осей Y.

Фанат-черт-тастик! Тогда давайте к этому! Я опустил часть кода для краткости.

var codingChartData = {
    yLabels: ["Python", "Octave/MATLAB", "JavaScript"],
    xLabels: ["Beginner", "Intermediate", "Advanced"],

Иддд, ничего не происходит.

Хм, может мне стоит добавить type: 'category' к опции xAxes.

Ну вот и появились ярлыки. Подождите, куда делись мои данные?

Это та часть, где я потратил несколько часов на отладку, пытаясь угадать, как диаграмма ожидала, что ее данные будут переданы ей (было опробовано множество перестановок вложенных списков и массивов), чтобы получить мои чертовы уровни навыков для проверки моих недостающих уверенность в области программного обеспечения. Не помогло и то, что в документации не говорится о так называемых «категориальных диаграммах» вообще, за исключением приведенной выше цитаты. Безрезультатно, я пошел спать расстроенный.

Решение'

На следующее утро я вспомнил, что читал о какой-то функции обратного вызова, которая форматировала те метки, которые я искал, в ответе StackOverflow. Я подумал, что могу использовать это для преобразования числовых данных в строки для меток. Я избавился от своей xLabels, которая до сих пор оказывалась бесполезной, и заменил опцию type обратными вызовами:

ticks: {
        callback: function(value) {
          if (value === 1)
            return 'Beginner';
          else if (value === 2)
            return 'Intermediate';
          else if (value === 3)
            return 'Advanced';
          else
            return '';
        }

Казалось, это действительно работает! Однако у меня не было никаких навыков, которые достигли бы уровня «Продвинутый» (я не такой дерзкий), из-за чего ChartJS быстро сбросил этот ярлык и расширил график до уровня «Промежуточный». как максимум. Кроме того, диаграмма начиналась с «Низкой» вместо нуля, что не дало мне возможности подчеркнуть, что я действительно слышал об этом языке один раз. Чтобы решить эту проблему, я добавил параметр max: 3 и установил параметр tick beginAtZero: true.

Я также удалил горизонтальные линии сетки, но остался с уродливыми серыми галочками на оси Y, которые меня сильно оскорбили. К счастью, у ChartJS есть такая возможность! Поэтому я просто установил drawTicks: false и ожидал, что это исправит мой сработавший перфекционизм.

Вместо этого ChartJS быстро решил вставить мои метки оси Y в саму фактическую ось. К этому моменту я так устал от ChartJS и его… относительно краткой документации, что после краткого поиска в Google «заполнения меток ChartJS» и ничего не нашел, я просто решил дополнить его пробелами:

labels: ["Python   ", "Octave/MATLAB   ", "JavaScript   "],

Я даже не способен испытать ни малейшего угрызения совести за это дурачество с моей стороны: через 10 секунд после того, как я увидел график в его «законченном» состоянии, я решил, что это все очень глупая затея размещать что-то подобное на личном сайте. , и сразу выбросил код. Может быть, кто-то еще найдет это полезным.

Я включил полную суть кода здесь.