javascript - 如何创建具有自定义线宽的 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. 我无法手动更改图表线宽。它们似乎与图表的高度或宽度设置中较大的一个成正比。设置 宽度:350:

1. 我无法更改图表上方/下方的空白/填充。这个可以使用 css position: relative; 修复。 left: -150; 或任何有效的方法。我真的不想对侧面(顶部、底部等)周围的任何东西执行此操作

1. 图表不显示在“”标签中。为了获得在线图表，我使用了表格单元格。

这是 JSFiddle为了它。

我设法在 Chart.JS 中找到了一个更接近我正在寻找的例子

问题仍然存在，我仍然无法准确地实现我正在寻找的东西，因为线的大小似乎与容器成正比。您可以通过调整窗口大小来查看。

问题:我正在寻找一个库，使我能够自定义半圆形仪表/环形图表中的线宽，而不是自动约束到图表的尺寸。

有没有关于另一个图书馆的推荐可以给我我正在寻找的东西？

Answer 1

amCharts 4 有不止一种方法，这是一个:


am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.GaugeChart);
chart.innerRadius = am4core.percent(80);



<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>



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