Как генерируются размеры HTML-тега amcharts4 rectangle? - PullRequest
Новая
       8

Как генерируются размеры HTML-тега amcharts4 rectangle?

1 голос
/ 01 мая 2019

При тестировании с рендерингом на различных устройствах, ориентациях и исходных материалах я натолкнулся на интересный случай.

Карта Канады (ОК, может быть, 2-я по величине страна на планете с множеством островов была не самой лучшейвыберите ..) на телефонном устройстве с размером окна просмотра 375x667, согласно инспектору веб-браузера, занимает пространство 327.0333x252.9 пикселей.

Этот путь вложен в серию тегов g.Однако они следуют за (не вложенным) тегом, в котором определен прямоугольник.Определение этого прямоугольника 323x400 не пропорционально размерам блока пути, создавая тонну пустого пространства в драгоценном пространстве области просмотра.

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

Сгенерированный фрагмент HTML: 

<g fill="#ffffff" fill-opacity="0" focusable="true">
  <rect width="323" height="400"></rect>
</g>
<g>
  <g style="touch-action: none; -moz-user-select: none;" transform="translate(-0.0077,-0.7856)">
    <g>
      <g role="group" stroke-width="0.9960565216800756" aria-label="Series" transform="translate(0,0) scale(1.003959090909091)">
        <g>
          <g clip-path="url(&quot;#id-29&quot;)">
            <g>
              <g>
                <g>
                </g>
              </g>
            </g>
          </g>
          <g>
          </g>
          <g fill="#d9d9d9" stroke="#ffffff" stroke-opacity="1" stroke-width="0.9960565216800756" focusable="true">
            <g>
              <g shape-rendering="auto" stroke="#ffffff" fill="#ffffff" fill-opacity="0" stroke-opacity="0">
                <path d="M0.0076775583937660485,76.05864696757311[...]L0.0076775583937660485,222.15490049518075Z"></path>
              </g>
            </g>
          </g>
        </g>
      </g>
      <g style="pointer-events: none;" opacity="0" transform="translate(101.0077,93.81894045410156)">
        <circle r="10"></circle>
      </g>
      <g role="group" stroke-width="0.9960565216800756" aria-label="Series" transform="translate(0,0) scale(1.003959090909091)">
        <g>
          <g clip-path="url(&quot;#id-82&quot;)">
            <g></g>
          </g>
          <g></g>
          <g fill="#a4a4a4" stroke="#ffffff" stroke-opacity="1" stroke-width="0.9960565216800756" style="cursor: pointer;" focusable="true" fill-opacity="0.8" id="id-156">
            <g>
              <g shape-rendering="auto">
                <path d="M169.91387280358214,136.7602231574686L[...]L242.03978113921693,186.75415049309635Z"></path>
                [...]
                <g fill="#bad533" stroke="#ffffff" stroke-opacity="1" stroke-width="0.9960565216800756" focusable="true">
                <g>
                <g shape-rendering="auto">
                  <path d="M292.10148344508775,306.28047397225953L[...]L279.4704374951894,307.7346226325906Z"></path>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
    </g>
    <g>
      <g>
        <g>
          <g></g>
        </g>
        <g></g>
      </g>
    </g>
  </g>
</g>
...