@NickToot
web developer

Какая JavaScript-библиотека для построения графиков подойдет?

Всем доброго времени суток! :)

Заранее хочу извиниться за такой глупый вопрос.

Коротко: нужна JS библиотека в которой можно сделать алиасы(свои подписи) для осей.

Подробнее: в общем мне потребовалось реализовать график в web-приложении, он должен создаваться динамически.
Изначально выбрал Chart.JS, очень хорошая библиотека, но для моей задумки она не очень подходит: я внимательно пролистал несколько раз документацию, и не нашел как можно кастомизировать подписи на оси Y, может это и звучит смешно, но мне кажется для моего случая это было бы нужно. Хочется сделать что-то на подобие графика ниже:
d5e3e949d25f485692fe0b5cd50cc7e2.png
Передавать значения, например: для первого места - 4, для второго - 3, и т.д. - логично, но подписи хотелось бы поменять. Chart.JS строит canvas графики, поэтому написать костыль для замены подписей тоже не получится.
  • Вопрос задан
  • 900 просмотров
Решения вопроса 1
@NickToot Автор вопроса
web developer
Всем спасибо за ответы, да D3.JS очень крутая и мощная штука, HighCharts.js тоже, но для одного простого линейного графика тащить такие огромные и сложные библиотеки мне не хотелось бы.
Как оказалось в Chart.JS все таки есть возможность переопределить названия подписей оси Y,
вот пример кода, который делает то что мне надо, да коряво, но для не совсем стандартного графика подойдет :)
var myLineChart = new Chart(ctx, {
	type: 'line',
	data: {
		labels: ['01.06.2016', '02.06.2016', '03.06.2016', '04.06.2016'],
		datasets: [{
			label: 'занятые места в конкурсах',
			data: [1, 3, 2, 4]
		}]
	},
	options: {
		scales: {
			yAxes: [{
				ticks: {
					callback: function(value, index, values) {
						if (value == 4) {
							return "1 место";
						} else if (value == 3) {
							return "2 место";
						} else if (value == 2) {
							return "3 место";
						} else if (value == 1) {
							return "участник";
						} else {
							return "";
						}
					}
				}
			}]
		}
	}
});

Результат:
88475704ed944b21b4a1f94b1d2463f7.png
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Посмотрите d3.js — очень гибкая, в ней точно можно делать любые подписи к осям и к меткам. Она, конечно, Хищниками для Чужих сделана, но разобраться по примерам (а их дохрениллион) можно. Или, возможно, в C3 найдется подходящее.
Ответ написан
IonDen
@IonDen
JavaScript developer. IonDen.com
D3.js
Введение в D3.js
Отличная бесплатная книга Interactive Data Visualization for the Web
Ответ написан
Комментировать
@lfoma
HighCharts.js хорош и мощен. Кстати яндекс использует.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы