Есть ли возможность у Chartjs построить график с двумя разными шкалами?

Question

[Антон]

Есть ли возможность у Chartjs построить график с двумя разными шкалами? Или какую альтернативу посоветуете для этого? Или это только в платных библиотечках?

Comments

[Антон]

Наверное не причем раз вы говорите:) Убрал:)

Answer 1

[0xD34F]

Есть. Смотрите примеры в документации, multi axis.

UPD. Чего на самом деле хотел автор вопроса: по результатам обсуждения в комментариях был изготовлен график с переключением видимости осей в зависимости от видимости соответствующего набора данных (за основу взят пример line chart multi axis из документации).

Comments

[Антон]

Да, обратил внимание на этот вариант. Но для полного счастья не хватает возможности давать имена шкалам графика и скрывать шкалы при отключении одного из параметров:(

[0xD34F]

Антон, я ничего не понял.

не хватает возможности давать имена шкалам графика

Какие имена, что это такое?

их крытию при

"Крытию"? Это на каком языке сказано?

[Антон]

Какие имена, что это такое?

Ну что бы каждая отдельная шкала была проиминованна, в прочим, я с этим уже разобрался, вот так это выглядит:

scales: {
						yAxes: [{
							scaleLabel: {
							display: true,
							labelString: 'Раз'
						},
							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
							display: true,
							position: 'left',
							id: 'y-axis-1',
						},

						{
							scaleLabel: {
							display: true,
							labelString: 'Два'
						},
							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
							display: true,
							position: 'left',
							id: 'y-axis-2',
						},
						 {
							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
							display: true,
							position: 'right',
							id: 'y-axis-3',


							// grid line settings
							gridLines: {
								drawOnChartArea: false, // only want the grid lines for one axis to show up
							},
						}],
					}

Да, тяжело когда не знаешь JS :(

"Крытию"? Это на каком языке сказано?

Исправил. Ну то есть если зачеркнул(скрыл параметр), то что бы шкала отвечающая за него, тоже исчезала.
То есть по аналогии как у Highcharts. Боюсь с этим без знаний JS, а именно работы с условиями, я уже не справлюсь:(

[0xD34F]

Антон,

что бы шкала отвечающая за него, тоже исчезала

Есть свойство display, по умолчанию оно true. Присваиваете false, дёргаете метод update - исчезнет. Например (пара кнопок над графиком, обработчик клика - в самом низу).

А чтобы эта хрень работала по клику на label'ы dataset'ов - можно определить обработчик

options: {
  legend: {
    onClick(event, labelItem) {
      // определяете, какие из dataset'ов скрыты/видимы, ну и скрываете/показываете соответсвующие оси графика
    }
  },
}

[Антон]

Про display да я понял, там на многих позициях этот метод задействован. А вот про update не знаю, это вы про это что ли говорите window.myLine.update(); ?

Например (пара кнопок над графиком, обработчик клика - в самом низу).

Ну как это через HTML реализовать я понимаю, просто я подумал, что можно это через js сделать, то есть если скрыл график то и скрывается шкала измерения...
Подскажите в JS это можно реализовать? Как там условия выполнить? Или в JS таких вещей как if нету вообще? Подскажите про что именно поискать информацию касательно JS ?

[0xD34F]

Антон,

А вот про update не знаю, это вы про это что ли говорите window.myLine.update(); ?

У графиков chart.js есть метод update, я говорю про него (пример по ссылке из моего предыдущего комментария всё-таки посмотрите). Что такое myLine - я без понятия.

Или в JS таких вещей как if нету вообще?

Т-а-а-а-а-а-к, ясненько. Уж что-что, а учить вас основам JS я точно не буду. Идите на фриланс, платите деньги, там вам всё сделают.

[Антон]

0xD34F,

У графиков chart.js есть метод update, я говорю про него (пример по ссылке из моего предыдущего комментария всё-таки посмотрите).

Я так понимаю вы про эту часть кода говорите?

if (axis) {
    axis.display = !axis.display;
    ch.update();
  }

Правильно ли я понимаю, что при нажатии на кнопку в display записывается обратное значения его самого, после чего график(то есть ch) перезагружается командой update ?

Т-а-а-а-а-а-к, ясненько. Уж что-что, а учить вас основам JS я точно не буду. Идите на фриланс, платите деньги, там вам всё сделают.

Ладно, ладно, почитал уже, есть там все(в JS), подумаю как можно реализовать через JS... На фриланс каждый дурак сходить сможет, тут самому важно научиться:)))

[0xD34F]

Так, вот вам пример того, как можно синхронизировать видимость осей с видимостью датасета. Всё, дальше сами. Вникайте, изучайте.

[Антон]

0xD34F, Спасибо, буду разбираться:) На худой конец, реализую через HTML :)