如何创建具有自定义线宽的JavaScript堆叠半圆仪表图？

我希望能够在一个堆叠仪表图上绘制两个或三个值，类似于以下内容，在另一个蓝色和主要厚度值的上方绘制浅绿色：

我已经看到了这些线被分开的例子，这也可以

前两个不需要重叠，但会很好

在查看时，我可以在图表上创建多个值，但只能在整圈中创建，不能在半圈中创建

在下面的JSFiddle中

旋转的
$（文档）.ready（函数（）{//6,32 5,38 2,34
$（“#测试圆”）({
动画：1，
动画步骤：5，
前地面边界宽度：7，
背景边框宽度：7，
百分之九十九,，
文本大小：28，
textStyle:'字体大小：12px；'，
textColor:“#666”，
多百分比：1，
//半圆形：1，
半圆：错，
百分比：[
{'percent'：10，'color'：'3180B8'，'title'：'Gryffindor'}，
{'percent'：30，'color'：'4ADBEA'，'title'：'Ravenclaw'}，
{'percent'：50，'color'：'49EBA8'，'title'：'Hufflepuff'}，
{'percent'：70，'color'：'FFCA35'，'title'：'Slytherin'}
],
多百分比梯度：1，
replacePercentageByText:“”，
背景颜色：“#eee”，
图标：“f0d0”，
iconPosition:'中间'，
iconColor:“#273B4E”
});
});

设置“半圆：真”，只绘制一个值。显然不是我要找的

这个库确实有一个带有两个值的示例，尽管我不确定如何复制这个示例，以及它是否可以在半圆形中工作，或者是否可以创建一个数组来堆叠这些值

在另一个测试中，使用AMCharts，我能够创建一个半圆、堆叠的仪表图

几个问题：

我无法手动更改图表线宽。它们似乎与图表的高度或宽度设置中的较大者成比例。 设置

宽度：350

：

我无法更改图表上方/下方的空白/填充。这一个可以使用css

position:relative固定；左-150或任何有用的东西。我真的不想这样做周围的任何方面（顶部，底部等）

图表不显示在“”标记中。为了得到直线图，我使用表格单元格

这是它的基本原理

我设法找到了一个更接近我所寻找的例子

问题仍然是，我仍然无法完全实现我想要的，因为再一次，生产线的大小似乎与容器成正比。您可以通过调整窗口的大小来看到这一点

问题/问题：我正在寻找一个库，该库使我能够自定义半圆形量规/圆环图中的线宽，并且不会自动约束到图表的尺寸

---

关于其他库的任何建议都可以为我提供我想要的信息吗？

有多种方法，这里有一种：

am4core.useTheme（am4themes_动画）；
var chart=am4core.create（“chartdiv”，am4charts.GaugeChart）；
chart.innerRadius=AM4核心百分比（80）

var colorSet=new am4core.colorSet（）；
var axis=chart.xAxes.push（新的am4charts.ValueAxis（））；
最小轴=0；
最大轴=100；
axis.renderer.innerRadius=10
axis.stricminmax=真；
axis.renderer.labels.template.disabled=true；
axis.renderer.ticks.template.disabled=true；
axis.renderer.grid.template.disabled=true

var range0=axis.axisRanges.create（）；
范围0.0=0；
范围0.endValue=60；
范围0.axisFill.fillOpacity=1；
range0.axisFill.fill=colorSet.getIndex（0）；
range0.grid.disabled=true

var range1=axis.axisRanges.create（）；
范围1.0=60；
范围1.endValue=100；
range1.axisFill.fillOpacity=1；
range1.axisFill.fill=am4core.color（“#DADADA”）；
range1.grid.disabled=真

var axis2=chart.xAxes.push（新的am4charts.ValueAxis（））；
axis2.min=0；
轴2.max=100；
axis2.stricminmax=true；
axis2.renderer.labels.template.disabled=true；
axis2.renderer.ticks.template.disabled=true；
axis2.renderer.grid.template.disabled=true

var range2=axis2.axisRanges.create（）；
范围2.0=0；
范围2.endValue=90；
range2.axisFill.fillOpacity=1；
range2.axisFill.fill=colorSet.getIndex（3）；
范围2.axisFill.radius=AM4核心百分比（105）；
range2.axisFill.innerRadius=AM4核心百分比（100）；//如果希望填充之间有一些间隙，请将其设置为>100
range2.grid.disabled=真

var range3=axis2.axisRanges.create（）；
范围3.0=90；
范围3.endValue=100；
范围3.axisFill.fillOpacity=0.5；
range3.axisFill.fill=am4core.color（“#DADADA”）；
范围3.axisFill.radius=AM4孔径百分比（105）；
range3.axisFill.innerRadius=AM4核心百分比（100）；//如果希望填充之间有一些间隙，请将其设置为>100
range3.grid.disabled=真

var label=chart.radarContainer.createChild（am4core.label）；
label.isMeasured=false；
label.fontSize=45；
label.x=AM4核心百分比（50）；
label.y=AM4核心百分比（100）；
label.horizontalCenter=“middle”；
label.verticalCenter=“底部”；
label.text=“50%”

这是一个结果：
太好了。我添加了一个新范围，以占用外部值不匹配的任何空间。我尝试使用
var shadow=bullet.filters.push（新的am4core.DropShadowFilter）添加阴影我从herehttps://www.amcharts.com/docs/v4/tutorials/using-filters/ 但是不起作用。仍然可以使用附加标签和悬停值进行游戏。最新小提琴作品：
 <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>