Градиентная заливка для калибровки - Highcharts

Question

https://jsfiddle.net/vishalChakravarti/htex9qdy/2/

Угол заполнения желтого градиента для калибровочной диаграммы в приведенной выше ссылке не соответствует приведенному здесь графику.

Прикрепление кода для той же проблемы и jsfiddleтакже.Спасибо.

 yAxis: {
      stops: [
        [0.9, {
          linearGradient: {
            x1: 0,
            x2: 1,
            y1: 0,
            y2: 0
          },
          stops: [
            [0, '#00ff00'],
            [0.5, '#ffff00'],
            [1, '#ff0000']
          ]
        }]
      ]

Answer 1

Вместо linerarGradient попробуйте radialGradient: { cx: 0, cy: 1, r: 1.5 }

Здесь вы можете попробовать разные значения, чтобы увидеть, что лучше всего подходит для вас.

$(function() {

  var gaugeOptions = {
    chart: {
      type: 'solidgauge'
    },
    title: null,
    pane: {
      center: ['50%', '85%'],
      size: '140%',
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },
    // the value axis
    yAxis: {
      stops: [
        [0.9, {
          radialGradient: {
            cx: 0,
            cy: 1,
            r: 1.5
          },
          stops: [
            [0, '#00ff00'],
            [0.5, '#ffff00'],
            [1, '#ff0000']
          ]
        }]
      ],
      lineWidth: 0,
      minorTickInterval: null,
      tickPixelInterval: 400,
      tickWidth: 0,
      title: {
        y: -70
      },
      labels: {
        y: 16
      }
    },

    plotOptions: {
      solidgauge: {
        dataLabels: {
          y: 5,
          borderWidth: 0,
          useHTML: true
        }
      }
    }
  };

  // The speed gauge
  $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
      min: 0,
      max: 200,
    },

    series: [{
      data: [80],
    }]

  }));

  // Bring life to the dials
  setInterval(function() {
    // Speed
    var chart = $('#container-speed').highcharts(),
      point,
      newVal,
      inc;

    if (chart) {

      /*       point = chart.series[0].points[0];
            inc = Math.round((Math.random() - 0.5) * 100);
            newVal = point.y + inc;
            
            if (newVal < 0 || newVal > 200) {
              newVal = point.y - inc;
            }
            
            point.update(newVal); */
    }

  }, 500);


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div style="width: 600px; height: 400px; margin: 0 auto">
  <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
</div>

Справочник по API : https://www.highcharts.com/docs/chart-design-and-style/colors