Появилась такая необходимость модернизировать стандартный doughnut chart, которые предоставляют библиотеки, но не знаю с чего начать. То есть необходимо изменить высоту и размер разных элементов в dought chart. Подскажите, как возможно изменить библиотеки(3d.js, chart.js, echart) или проще попробовать самому нарисовать svg чарт,
-
@StrangerintheQ , возможно, я не совсем правильно выразился. ПО дефолту, все значения имеют одинаковый внутренний и внешний радиус. А хотелось бы, что б каждая data имели свой внешний и внутренний радиус, как на картинке выше)– Mija13 ноя 2019 в 6:59
-
@StrangerintheQ , тогда пока у меня есть возможность спросить, подскажите, в чем лучше, удобней и функциональней это все можно делать? d3.js или Вы можете посоветовать что то другое. И если у Вас есть какие-то примеры или ссылки для конкретно моей задачи, не могли бы вы поделится?– Mija13 ноя 2019 в 7:25
-
@StrangerintheQ , А можете подсказать, как это все на D3.js происходит? Так же с построением линий (.moveTo, .arcTo и т.д.) или как то можно еще?– Mija18 ноя 2019 в 11:06
-
Я попозже добавлю ответ с использованием d3, там это проще, он сам все считает– Stranger in the Q18 ноя 2019 в 11:08
3 ответа
Вот вариант на js+svg, тут надо посчитать углы и точки арок:
let data = Array(5).fill(0).map((e,i)=> ({
r1: 10+i*2,
r2: -i*0.5,
value: Math.random()+0.1,
color: `hsl(${i*45},65%,65%)`
}));
let total = data.reduce((a, d) => a + d.value, 0);
let r = 40;
let a = 0;
chart.innerHTML = data.map(d => {
let cs1 = Math.cos(a);
let sn1 = Math.sin(a);
let angle = d.value/total*2*Math.PI;
a += angle;
let cs2 = Math.cos(a);
let sn2 = Math.sin(a);
let ir = r + d.r1;
let or = r + d.r2;
let la = angle > Math.PI ? 1 : 0;
return `<path d="${[
"M", [cs1*ir, sn1*ir],
"A", [ir, ir, 0, la, 1, cs2*ir, sn2*ir],
"L", [cs2*or, sn2*or],
"A", [or, or, 0, la, 0, cs1*or, sn1*or]
].join('')}" fill="${d.color}"></path>`;
}).join("");
body {
margin: 0;
overflow: hidden;
}
path {
opacity: 0.7;
transition: 1;
transition: 500ms;
cursor: pointer;
}
path:hover {
opacity: 1;
}
<svg id=chart viewbox=-60-60,120,120 width=100vw height=100vh></svg>
Для разбиения окружности на сектора вы можете использовать stroke-dasharray
Для смещения начала сектора используется stroke-dashoffset
Здесь нижний круг имеет серый цвет над ним расположен цветной сектор второго круга.
При r="40"
Полная длина окружности равна perimetr = 2 * 3.14 * 40 = 251,2
В этом примере строка заполнена на 80% amount = 80 , значит её нужно сдвинуть
stroke-dashoffset = perimeter - perimeter * amount / 100 = 50.3
<svg width="100%" height="100%" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="tomato"/>
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="grey"/>
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#00CCFF" stroke-dasharray="251.2" stroke-dashoffset="50.3"/>
<text x="40" y="50" fill="black" font-size="10">Text</text>
</svg>
Ниже пример с 50% заполнением
<svg width="100%" height="100%" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="tomato"/>
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="grey"/>
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#00CCFF" stroke-dasharray="251.2" stroke-dashoffset="125.6"/>
<text x="40" y="50" fill="black" font-size="10">Text</text>
</svg>
Несколько цветных секторов
<svg width="300px" height="300px" viewbox="0 0 100 100">
<!-- Центральный круг серый цвет -->
<circle cx="50" cy="50" r="40" fill="#eee"/>
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="grey"/>
<!-- Progress -->
<!-- Пример заполнения секторов Старт 3 часа (дефолтное положение начала рисования окружности)-->
<!-- 100% fill -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#2196f3" stroke-dasharray="251.2" stroke-dashoffset="0"/>
<!-- 80% fill -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#ff5722" stroke-dasharray="251.2" stroke-dashoffset="50.3"/>
<!-- 70% fill -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#009688" stroke-dasharray="251.2" stroke-dashoffset="75.36"/>
<!-- 50% fill -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#9c27b0" stroke-dasharray="251.2" stroke-dashoffset="125.6"/>
<!-- 40% fill -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#e91e63" stroke-dasharray="251.2" stroke-dashoffset="150.72"/>
<!-- 20% fill -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#f44336" stroke-dasharray="251.2" stroke-dashoffset="200.96"/>
<!-- Текст в центре -->
<text x="40" y="50" fill="black" font-size="10">Text</text>
</svg>
Пример анимации
$(".progress").each(function() {
var dataProgress = $(this).attr("stroke-dashoffset");
$(this).attr("stroke-dashoffset", "251.2");
$(this).animate({
"stroke-dashoffset": dataProgress
},1500)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg width="300px" height="300px" viewbox="0 0 100 100">
<!-- Center color -->
<circle cx="50" cy="50" r="40" fill="#eee"/>
<!-- Default color of ring -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="white"/>
<circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#2196f3" stroke-dasharray="251.2" stroke-dashoffset="0"/>
<circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#ff5722" stroke-dasharray="251.2" stroke-dashoffset="50.3"/>
<circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#009688" stroke-dasharray="251.2" stroke-dashoffset="75.36"/>
<circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#9c27b0" stroke-dasharray="251.2" stroke-dashoffset="125.6"/>
<circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#e91e63" stroke-dasharray="251.2" stroke-dashoffset="150.72"/>
<circle class="progress" cx="50" cy="50" r="40" fill="transparent" stroke-width="20" stroke="#f44336" stroke-dasharray="251.2" stroke-dashoffset="200.96"/>
<text x="40" y="50" fill="black" font-size="10">Text</text>
</svg>
-
1Это все прекрасно, но, возможно, я спрашивал не про разбиение окружностей на сектора, а как сделать, чтоб у каждого сектора был свой внутренний и внешний радиус.– Mija13 ноя 2019 в 9:53
-
2@Mija не вижу проблем, продублируйте нужные сектора с большим радиусом. Главное, что здесь доступно объяснено, как реализуется сектор Или, просто задавайте нужному сектору больший радиус, оставляя соседние сектора с меньшим радиусом Двойного контура в вашем случае не нужно 13 ноя 2019 в 11:00
Вот решение на d3, все что тут нужно сделать - менять внутренний и внешний радиус у arc-генератора:
.attr('d', d => {
var ir = radius/3 + Math.random()*radius/5;
var or = ir + Math.random()*radius/5;
return arc.innerRadius(ir).outerRadius(or)(d)
})
var data = [ Math.random(), Math.random(), Math.random(), Math.random()]
var width = 260;
var height = 260;
var radius = Math.min(width, height) / 2;
var color = d3.scaleOrdinal(d3.schemeCategory10);
var svg = d3.select("body")
.append('svg')
.attr('viewBox', `${-width/2} ${-height/2} ${width} ${height}`)
var arc = d3.arc();
var pie = d3.pie()
.value(d => d )
.sort(null);
var path = svg.selectAll('path')
.data(pie(data))
.enter()
.append("g")
.append('path')
.attr('d', d => {
var ir = radius/3 + Math.random()*radius/5;
var or = ir + Math.random()*radius/5;
return arc.innerRadius(ir).outerRadius(or)(d)
})
.attr('fill', (d,i) => color(i))
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>