Как создать сложную полукруговую диаграмму JavaScript с настраиваемой шириной линии?

Question

Я хотел бы иметь возможность построить два или три значения на одной диаграмме с накоплением, как показано ниже, со светло-зеленым, поверх другого синего цвета и основным толстым значением:

Я видел примеры разделения этих строк, что также можно сделать.

Первые два не нужно накладывать друг на друга, но было бы неплохо.

При взгляде на https://github.com/pguso/jquery-plugin-circliful, я могу создать несколько значений на графике, но только по кругу, а не по полукругу.

В следующем JSFiddle, https://jsfiddle.net/0c8qaqaj/41/

 <section class="container">

    <h3>Circliful</h3>

    <div class="row">
        <div class="col-lg-4">
            <div id="test-circle"></div>
        </div>    </div>
</section>

<script>
    $( document ).ready(function() { // 6,32 5,38 2,34
        $("#test-circle").circliful({
            animation: 1,
            animationStep: 5,
            foregroundBorderWidth: 7,
            backgroundBorderWidth: 7,
            percent: 99,
            textSize: 28,
            textStyle: 'font-size: 12px;',
            textColor: '#666',
            multiPercentage: 1,
            //halfCircle: 1,
            halfCircle: false,
            percentages: [
                {'percent': 10, 'color': '#3180B8', 'title': 'Gryffindor' },
              {'percent': 30, 'color': '#4ADBEA', 'title': 'Ravenclaw' },
              {'percent': 50, 'color': '#49EBA8', 'title': 'Hufflepuff' },
              {'percent': 70, 'color': '#FFCA35', 'title': 'Slytherin' }
            ],
            multiPercentageLegend: 1,
                        replacePercentageByText: '',
            backgroundColor: '#eee',
            icon: 'f0d0',
            iconPosition: 'middle',
            iconColor: '#273B4E'
        });
    });

</script>

Установка 'halfCircle: true', рисует только одно значение.Очевидно, не то, что я ищу.

В библиотеке есть образец с двумя значениями, хотя я не уверен, как повторить этот пример и будет ли он работать в полукруге или я смогу создать массив для хранения этих значений.

В другом тесте, используя AMCharts, я смог создать полукруговую диаграмму с круговой шкалой.

Несколько проблем:

1. Я не могу изменить ширину линии диаграммы вручную.Кажется, они пропорциональны большему из значений высоты или ширины графика.Настройка width: 350:

Я не могу изменить пробелы / отступы над / под графиками.Это можно исправить с помощью css position: relative; left: -150; или как угодно.Я действительно не хочу делать это для всех сторон (верх, низ и т. Д.)

Графики не отображаются в теге ''.Чтобы получить линейные графики, я использую ячейки таблицы.

Вот для этого JSFiddle .

Мне удалось найти более точный пример того, что я ищу, в Chart.JS

Проблема остается в том, что я все еще не могу достичь именно того, что ищу, потому что размер линии, похоже, прямо пропорционален контейнеру.Вы можете увидеть это, изменив размер окна.

Вопрос / проблема: я ищу библиотеку, которая дает мне возможность настраивать ширину линий в полукруглых калибровочных / кольцевых диаграммах, а не автоматическиограничены размерами диаграммы.

Какие-нибудь рекомендации по другой библиотеке, которые дадут мне то, что я ищу, пожалуйста?

Answer 1

Существует более одного способа сделать это с помощью amCharts 4 , вот один:

am4core.useTheme(am4themes_animated); var chart = am4core.create("chartdiv", am4charts.GaugeChart); chart.innerRadius = am4core.percent(80);</p> <p>var colorSet = new am4core.ColorSet(); var axis = chart.xAxes.push(new am4charts.ValueAxis()); axis.min = 0; axis.max = 100; axis.renderer.innerRadius = 10 axis.strictMinMax = true; axis.renderer.labels.template.disabled = true; axis.renderer.ticks.template.disabled = true; axis.renderer.grid.template.disabled = true;</p> <p>var range0 = axis.axisRanges.create(); range0.value = 0; range0.endValue = 60; range0.axisFill.fillOpacity = 1; range0.axisFill.fill = colorSet.getIndex(0); range0.grid.disabled = true;</p> <p>var range1 = axis.axisRanges.create(); range1.value = 60; range1.endValue = 100; range1.axisFill.fillOpacity = 1; range1.axisFill.fill = am4core.color("#DADADA"); range1.grid.disabled = true;</p> <p>var axis2 = chart.xAxes.push(new am4charts.ValueAxis()); axis2.min = 0; axis2.max = 100; axis2.strictMinMax = true; axis2.renderer.labels.template.disabled = true; axis2.renderer.ticks.template.disabled = true; axis2.renderer.grid.template.disabled = true;</p> <p>var range2 = axis2.axisRanges.create(); range2.value = 0; range2.endValue = 90; range2.axisFill.fillOpacity = 1; range2.axisFill.fill = colorSet.getIndex(3); range2.axisFill.radius = am4core.percent(105); range2.axisFill.innerRadius = am4core.percent(100); // set it to >100 if you'd like to have some gap between fills range2.grid.disabled = true;</p> <p>var range3 = axis2.axisRanges.create(); range3.value = 90; range3.endValue = 100; range3.axisFill.fillOpacity = 0.5; range3.axisFill.fill = am4core.color("#DADADA"); range3.axisFill.radius = am4core.percent(105); range3.axisFill.innerRadius = am4core.percent(100); // set it to >100 if you'd like to have some gap between fills range3.grid.disabled = true;</p> <p>var label = chart.radarContainer.createChild(am4core.Label); label.isMeasured = false; label.fontSize = 45; label.x = am4core.percent(50); label.y = am4core.percent(100); label.horizontalCenter = "middle"; label.verticalCenter = "bottom"; label.text = "50%";

И это результат: https://codepen.io/team/amcharts/pen/qgxyZK