Как я могу сделать так, чтобы ChartJS всегда был внизу div? - PullRequest
Новая
       0

Как я могу сделать так, чтобы ChartJS всегда был внизу div?

0 голосов
/ 19 января 2019

Я перепробовал все, что мог придумать. Кажется, я просто не могу понять, как чарт относится к достижению сути деления. Я воспроизвел свою диаграмму здесь, в этом Codepen, так что ее легко раскошелиться и отредактировать. Я в основном копирую и вставляю свой CSS прямо из devtools в кодовый блок https://codepen.io/spkellydev/pen/JwQqKr?editors=1011

CSS :
#myChart {
  animation-delay:0s;
  animation-direction:normal;
  animation-duration:0.001s;
  animation-fill-mode:none;
  animation-iteration-count:1;
  animation-name:chartjs-render-animation;
  animation-play-state:running;
  animation-timing-function:ease;
  box-sizing:border-box;
  color:rgb(78, 78, 78);
  display:block;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size:16px;
  font-weight:400;
  height:192px;
  line-height:24px;
  overflow-wrap:break-word;
  text-align:left;
  text-size-adjust:100%;
  width: 385px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.myChart {
  background-color:rgb(236, 236, 236);
  border-left-color:rgb(0, 166, 217);
  border-left-style:solid;
  border-left-width:3px;
  box-sizing:border-box;
  color:rgb(78, 78, 78);
  display:block;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size:16px;
  font-weight:400;
  height:296px;
  line-height:24px;
  margin-bottom:24px;
  margin-top:48px;
  min-height:296px;
  overflow-wrap:break-word;
  position:relative;
  text-align:left;
  text-size-adjust:100%;
  width:387.703px;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

Я пытаюсь, чтобы div напоминал эту картинку enter image description here

1 Ответ

0 голосов
/ 19 января 2019 
.myChart {
  display: flex;
  flex-direction: column;
}
.myChart p {
  flex-grow: 1;
}

Позиционирует график внизу. Однако в настоящее время график содержит отступы. Вы можете либо использовать параметры диаграммы, чтобы удалить их, либо увеличить его размер, задать отрицательные поля и скрыть переполнение.

...