Chart.js 2.7.0 Как динамически добавить горизонтальную полосу прокрутки, а затем удалить ее

[РЕДАКТИРОВАТЬ] Просто посмотрите на мой ответ, чтобы узнать, как прокручивать (или не прокручивать, в зависимости от ширины полосы), а также прокручивать с заблокированной осью Y, и чтобы иметь текст на ваших барах, но при необходимости переворачивайте их вертикально.[Конец редактирования]

Принятое решение для добавления горизонтальной прокрутки заключается в следующем:

Поместите холст в фиксированный размер div. Затем поместите этот div в контейнер, который позволяет прокручивать.

Хорошо, это здорово. Но пока мне не понадобится прокрутка, я бы хотел, чтобы холст занимал 100% высоты и ширины окна. Вот что я имею в виду:

Например, вот оригинальное предложение:

<body style="height: 100%; width: 100%; overflow: hidden; margin: 0;">
<div id="canvas-wrapper" style="height: 100%; width: 100%; overflow-x: scroll; overflow-y: hidden;">
<div id="canvas-holder" style="height: 100%; width: 500px;" oncontextmenu="return false;">
<canvas id="myChart"></canvas>
</div>
</div>
</body>

http://jsfiddle.net/jmpxgufu/152/

Когда вы посмотрите на этот jsfiddle, вы увидите, что оболочке для overflow-x установлено значение scroll, а для div с фиксированным размером установлено (случайным образом) 500px. Так, в jsfiddle, если вы установите размер окна вывода менее 500 пикселей, он добавит полосу прокрутки (конечно!), Но когда размер окна больше 500 пикселей, я просто получаю пустое пространство справа от диаграмма. Тьфу.

Итак, я пытался что-то, как насчет того, если у меня есть какое-то событие (и здесь я использовал анимацию, событие onComplete), настройте его для нас. Я подумал (случайно), что если ширина бара станет меньше 14, я смогу включить прокрутку:

<body style="height: 100%; width: 100%; overflow: hidden; margin: 0;">
<div id="canvas-wrapper" style="height: 100%; width: 100%; overflow-x: hidden; overflow-y: hidden;">
<div id="canvas-holder" style="height: 100%; width: 100%;" oncontextmenu="return false;">
<canvas id="myChart"></canvas>
</div>
</div>
</body>

http://jsfiddle.net/jmpxgufu/154/

Проблема в том, что, как только я переключаюсь с отсутствия прокрутки на прокрутку, событие анимации перестает срабатывать (где эта вещь использовалась для запуска каждого пикселя, который я перемещал в окне). Поэтому я не могу вернуть его обратно к прокрутке, как только включу прокрутку.

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

Как другие люди делают это? Я не могу быть единственным, кто не хочет фиксировать с графиком - всегда!

Благодарю.

Источник

1 ответ

Решение

Для людей, которые хотят знать:

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

хорошо... вот код для просмотра!

<body style="height: 100%; width: 100%; overflow: hidden; margin: 0;">
<div id="chartWrapper" style="height: 100%; width: 100%;">
   <div id="canvas-wrapper" style="height: 100%; width: 100%; overflow-x: hidden; overflow-y: hidden;">
      <div id="canvas-holder" style="height: 100%; width: 100%;" oncontextmenu="return false;">
      <canvas id="myChart" style="background-Color: white"></canvas>
      </div>
   </div>
   <canvas id="myChartAxis" style="position: absolute; top: 0; left: 0; pointer-events: none; height: 100%; width: 0px; background-Color: white"></canvas>
</div>
</body>

http://jsfiddle.net/jmpxgufu/159/

(одно предостережение: я не уверен почему, но когда я опубликовал свой код, который работал с библиотеками chart.js, с которыми я связывался локально при разработке и тестировал локально, при вводе в jsfiddle сообщалось обо всех типах ошибок Таким образом, этот код был быстро изменен для работы - так что, вероятно, он не идеален, но даст вам идеи)

Источник
Другие вопросы по тегам