如何将线性渐变转为环形渐变（径向渐变无效）——CSS、JS、HTML

需求说明 #

• 创建带有非线性格式渐变色彩的仪表盘
• 渐变末端指向仪表盘中心
• 渐变根据停止位置呈现轻微倾斜效果
• 颜色可通过color0、color1等变量替换，第一个颜色固定为红色，其余为灰色

期望效果 #

实现代码 #

JavaScript #

am5.ready(function() {

  // 创建根元素
  var root = am5.Root.new("chartdiv");

  // 设置主题
  root.setThemes([
    am5themes_Animated.new(root)
  ]);

  // 创建雷达图表（仪表盘）
  var chart = root.container.children.push(
    am5radar.RadarChart.new(root, {
      panX: false,
      panY: false,
      startAngle: 180,
      endAngle: 360
    })
  );

  // 创建轴及渲染器
  var axisRenderer = am5radar.AxisRendererCircular.new(root, {
    innerRadius: -10,
    strokeOpacity: 1,
    strokeWidth: 15,
    strokeGradient: am5.LinearGradient.new(root, {
      rotation: 0,
      stops: [{
          color: am5.color('#f50223')
        }, // color0：红色
        {
          color: am5.color('#D4D3D3')
        }, // color1：灰色
        {
          color: am5.color('#D4D3D3')
        }, // color2：灰色
        {
          color: am5.color('#D4D3D3')
        },
        {
          color: am5.color('#D4D3D3')
        },
        {
          color: am5.color('#D4D3D3')
        },
        {
          color: am5.color('#D4D3D3')
        },
        {
          color: am5.color('#D4D3D3')
        },
        {
          color: am5.color('#D4D3D3')
        },
        {
          color: am5.color('#D4D3D3')
        },
        {
          color: am5.color('#D4D3D3')
        },
        {
          color: am5.color('#D4D3D3')
        },
        {
          color: am5.color('#D4D3D3')
        },
        {
          color: am5.color('#D4D3D3')
        },
        {
          color: am5.color('#D4D3D3')
        },
        {
          color: am5.color('#D4D3D3')
        },
        {
          color: am5.color('#D4D3D3')
        },
        {
          color: am5.color('#D4D3D3')
        },
        {
          color: am5.color('#D3D3D3')
        },
        {
          color: am5.color('#D3D3D3')
        },
        {
          color: am5.color('#D3D3D3')
        }
      ]
    })
  });

  var xAxis = chart.xAxes.push(
    am5xy.ValueAxis.new(root, {
      maxDeviation: 0,
      min: -1,
      max: 1,
      strictMinMax: true,
      renderer: axisRenderer
    })
  );

  // 添加指针
  var axisDataItem = xAxis.makeDataItem({});
  axisDataItem.set("value", 0);

  var bullet = axisDataItem.set("bullet", am5xy.AxisBullet.new(root, {
    sprite: am5radar.ClockHand.new(root, {
      radius: am5.percent(99)
    })
  }));

  xAxis.createAxisRange(axisDataItem);

  axisDataItem.get("grid").set("visible", false);

  // 设置指针值的函数
  function setClockHandValue(newValue) {
    axisDataItem.set("value", newValue);
  }

  // 初始化指针位置
  setClockHandValue(0.5);

}); // end am5.ready()

CSS #

#chartdiv {
  width: 100%;
  height: 300px;
}

HTML #

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/radar.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

<div id="chartdiv"></div>

内容的提问来源于stack exchange，提问作者The Prescient Robot