Chartist.js, элемент круга SVG не отображается в контейнере - PullRequest
Новая
       36

Chartist.js, элемент круга SVG не отображается в контейнере

1 голос
/ 21 сентября 2019

Я использую Chartist.js для работы с круговой диаграммой.Я пытаюсь добавить простой круг на заднем плане, но по какой-то причине элемент круга просто заканчивается в верхнем левом углу с размерами 0x0.

Вот SVG: 

<div class="contents" id="chart-container">
    <svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-pie" style="width: 100%; height: 100%;" viewBox="0 0 359 219">
        <g class="basecircle">
            <cirlce class="basecircleelement" cx="10" cy="10" fill="black" cr="181.76999999999998">
            </cirlce>
        </g>
        <g ct:series-name="value" class="ct-series ct-series-a">
            <path d="M147.071,10.108A104.375,104.375,0,1,0,179.325,5L179.325,109.375Z" class="ct-slice-pie" ct:value="95" style="fill: gray; stroke: white; stroke-width: #fff;"></path>
        </g>
        <g ct:series-name="rest" class="ct-series ct-series-b">
            <path d="M179.325,5A104.375,104.375,0,0,0,146.725,10.222L179.325,109.375Z" class="ct-slice-pie" ct:value="5" style="fill: transparent;"></path>
        </g>
    </svg>
</div>

Я ожидал, что должны появиться «g.basecircle» и «circle.basecircleelement» (он должен быть в центре контейнера, но я еще не вычислял cx и cy) с радиусом 181.7699999999999898 - это значение равнорассчитывается как половина clientWidth-, но заканчивается в верхнем левом углу элемента SVG с размером 0 x 0

Есть ли что-то, что мне не хватает?

enter image description here

1 Ответ

1 голос
/ 21 сентября 2019

это значение рассчитывается как половина clientWidth-, но оно заканчивается в верхнем левом углу элемента SVG с размером 0 x 0

Опечатки должны быть исправлены: circle вместо cirlce

Обозначение радиуса - r вместо cr

Границы холста Svg ограничены красным квадратом style = "border: 1px solid red;"

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

Чтобы поместить черный круг в центр холста svg, вам нужно установить координаты cx =" 359/2 " cy =" 219/2 "

<div class="contents" id="chart-container">
    <svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-pie"  viewBox="0 0 359 219" style="border:1px solid red;">
        <g class="basecircle">
            <circle class="basecircleelement" cx="179.5" cy="109.5" fill="black" r="179.5">
            </circle>
        </g>
        <g ct:series-name="value" class="ct-series ct-series-a">
            <path d="M147.071,10.108A104.375,104.375,0,1,0,179.325,5L179.325,109.375Z" class="ct-slice-pie" ct:value="95" style="fill: gray; stroke: white; stroke-width: #fff;"></path>
        </g>
        <g ct:series-name="rest" class="ct-series ct-series-b">
            <path d="M179.325,5A104.375,104.375,0,0,0,146.725,10.222L179.325,109.375Z" class="ct-slice-pie" ct:value="5" style="fill: transparent;"></path>
        </g>
		
    </svg>
</div>

Обновление

Если вы хотите, чтобы черный круг не образовывался и полностью не помещался на холсте svg, вам нужно установитьего радиус равен половине высоты холста r= 219 / 2 = 109.5 

<div class="contents" id="chart-container">
    <svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-pie"  viewBox="0 0 359 219" style="border:1px solid red;">
        <g class="basecircle">
            <circle class="basecircleelement" cx="179.5" cy="109.5" fill="black" r="109.5">
            </circle>
        </g>
        <g ct:series-name="value" class="ct-series ct-series-a">
            <path d="M147.071,10.108A104.375,104.375,0,1,0,179.325,5L179.325,109.375Z" class="ct-slice-pie" ct:value="95" style="fill: gray; stroke: white; stroke-width: #fff;"></path>
        </g>
        <g ct:series-name="rest" class="ct-series ct-series-b">
            <path d="M179.325,5A104.375,104.375,0,0,0,146.725,10.222L179.325,109.375Z" class="ct-slice-pie" ct:value="5" style="fill: transparent;"></path>
        </g>
		
    </svg>
</div>
...