Как я могу создать вертикальную прокрутку на графике. js для линейного графика? - PullRequest
Новая
       8

Как я могу создать вертикальную прокрутку на графике. js для линейного графика?

0 голосов
/ 24 марта 2020

Я создал несколько линейных диаграмм по вертикали в порядке с диаграммой. Js. Теперь я хочу добавить вертикальную прокрутку, чтобы я мог просматривать другой график, используя вертикальную прокрутку.

Я не вижу опции для этого в документах. Есть идеи?

1 Ответ

0 голосов
/ 24 марта 2020

Какой тип вертикальной прокрутки вы пытаетесь достичь? Если вы пытаетесь прокрутить всю диаграмму по вертикали, почему бы просто не поместить элемент canvas, используемый Chart. JS, в div. Например, 

<div id="chartContainer">
    <canvas id="myChart"></canvas>
</div>

, а затем добавьте CSS, придающее высоты холсту и меньшую высоту / переполнение-y для контейнера. 

    #chartContainer{ overflow: scroll, height: 300px; }  #myChart{ height: 600px; }

Редактировать 1 Фрагмент выше работает для меня. Не видя ручку, трудно понять, в чем конкретно заключается проблема c с вашей диаграммой и как этот фрагмент работает иначе, чем вы ожидаете.

Без ручки или более подробной информации я могу только угадайте, но проблема в том, что вы добавили свойство переполнения в контейнер, но прокрутка не происходит (т. е. показана полная диаграмма)?

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

Basi c Пример такой конфигурации ниже:

HTML, разделение контейнера прокрутки и контейнера диаграммы для раздельного определения размера элемента диаграммы: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div id="scrollContainer">
  <div id="chartContainer">
    <canvas id="myChart" ></canvas>
  </div>
</div>

CSS, добавление размера в chartContainer для определения размера диаграммы: 

#scrollContainer{
  height: 300px;
  overflow-y: auto;

}
#chartContainer{
  height: 600px;
  width: 500px;
  position: relative;

}

JavaScript объект диаграммы со свойством аспектного отношения, установленным в значение false: 

new Chart(document.getElementById("myChart"), {
  type: 'line',
  data: {
    labels: [1500,1600,1700,1800,1900,2001],
    datasets: [{ 
        data: [86,114,106,86,114,106],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      }, { 
        data: [282,350,411,282,350,411],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      }, { 
        data: [168,170,178,168,170,178],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      }
    ]
  },
  options: {
    maintainAspectRatio: false
  }
});

демо: 

new Chart(document.getElementById("myChart"), {
  type: 'line',
  data: {
    labels: [1500,1600,1700,1800,1900,2001],
    datasets: [{ 
      data: [86,114,106,86,114,106],
      label: "Africa",
      borderColor: "#3e95cd",
      fill: false
    }, { 
      data: [282,350,411,282,350,411],
      label: "Asia",
      borderColor: "#8e5ea2",
      fill: false
    }, { 
      data: [168,170,178,168,170,178],
      label: "Europe",
      borderColor: "#3cba9f",
      fill: false
    }
    ]
  },
  options: {
    maintainAspectRatio: false
  }
});
#scrollContainer{
  height: 300px;
  overflow-y: auto;

}
#chartContainer{
  height: 600px;
  width: 500px;
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div id="scrollContainer">
  <div id="chartContainer">
    <canvas id="myChart" ></canvas>
  </div>
</div>
...