SVG Polyline увеличит количество точек Y - PullRequest
Новая
       16

SVG Polyline увеличит количество точек Y

0 голосов
/ 05 июля 2018

Есть ли в любом случае, чтобы увеличить Y точек на SVG? Мои точки Y находятся на десятичной пропасти. Когда вы смотрите в браузере, это будет выглядеть как прямая линия. 

<svg viewBox="0 0 500 100" class="chart">    
  <polyline fill="none" stroke="#0074d9" stroke-width="1"
      points="
        0,55.15
        110,55.43
        220,55.98
        330,56.01
        440,56.09
  "/>  
</svg>

Ура! * * 1004

1-й рис. Текущий, когда вы запускаете svg в браузере enter image description here

2-й рис. Чего я пытаюсь достичь

enter image description here

1 Ответ

0 голосов
/ 05 июля 2018

Ну, вот решение, которое предполагает несколько вещей:

  • Вы хотите, чтобы координаты y в SVG совпадали с исходными данными. Если вы хотите этого, то вам нужно будет затем перевернуть поверхность для рисования, потому что начало координат 0,0 в SVG - это верхнее, левое, а не нижнее, левое, как на большинстве графиков.
  • Вы не заботитесь об указании абсолютной шкалы и просто хотите указать относительные изменения, независимо от того, насколько они незначительны, и вас не волнует относительная шкала осей X и Y.

Таким образом, это добавляет CSS-преобразование, которое переворачивает вашу линию по вертикали, сужает viewBox, так что ось y увеличивается в середине пятидесятых. А затем сжимает получившийся чертеж в пространство для рисования с помощью preserveAspectRatio / meet (я не удосужился переделать вашу ось X, я просто сжал ее до 10%, переместив десятичную точку.) 

#tooltip-flip{
  background: #DDD;
  transform-origin: 50%, 50%;
  transform: scaleY(-1);
}
<svg id="tooltip-flip" viewBox="-0.25 54.7 4.8 1" width="500px" height="200px" preserveAspectRatio="xMinYMin meet">    
  <polyline fill="none" stroke="#0074d9" stroke-width="0.005"
      points="0,55.15 1.10,55.43 2.20,55.98 3.30,56.01 4.40,56.09"/>  
</svg>
...