Я работал над своим личным веб-сайтом и обнаружил, что хочу показать множество языков программирования/программ, о которых у меня есть смутные знания, притворяясь, что я выше уровня 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 секунд после того, как я увидел график в его «законченном» состоянии, я решил, что это все очень глупая затея размещать что-то подобное на личном сайте. , и сразу выбросил код. Может быть, кто-то еще найдет это полезным.
Я включил полную суть кода здесь.