3

Появилась такая необходимость модернизировать стандартный doughnut chart, которые предоставляют библиотеки, но не знаю с чего начать. То есть необходимо изменить высоту и размер разных элементов в dought chart. Подскажите, как возможно изменить библиотеки(3d.js, chart.js, echart) или проще попробовать самому нарисовать svg чарт, doughnut chart

4
  • @StrangerintheQ , возможно, я не совсем правильно выразился. ПО дефолту, все значения имеют одинаковый внутренний и внешний радиус. А хотелось бы, что б каждая data имели свой внешний и внутренний радиус, как на картинке выше)
    – Mija
    13 ноя 2019 в 6:59
  • @StrangerintheQ , тогда пока у меня есть возможность спросить, подскажите, в чем лучше, удобней и функциональней это все можно делать? d3.js или Вы можете посоветовать что то другое. И если у Вас есть какие-то примеры или ссылки для конкретно моей задачи, не могли бы вы поделится?
    – Mija
    13 ноя 2019 в 7:25
  • @StrangerintheQ , А можете подсказать, как это все на D3.js происходит? Так же с построением линий (.moveTo, .arcTo и т.д.) или как то можно еще?
    – Mija
    18 ноя 2019 в 11:06
  • Я попозже добавлю ответ с использованием d3, там это проще, он сам все считает 18 ноя 2019 в 11:08

3 ответа 3

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>

3

Для разбиения окружности на сектора вы можете использовать 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>

2
  • 1
    Это все прекрасно, но, возможно, я спрашивал не про разбиение окружностей на сектора, а как сделать, чтоб у каждого сектора был свой внутренний и внешний радиус.
    – Mija
    13 ноя 2019 в 9:53
  • 2
    @Mija не вижу проблем, продублируйте нужные сектора с большим радиусом. Главное, что здесь доступно объяснено, как реализуется сектор Или, просто задавайте нужному сектору больший радиус, оставляя соседние сектора с меньшим радиусом Двойного контура в вашем случае не нужно 13 ноя 2019 в 11:00
1

Вот решение на 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.