javascript - Highcharts :(Solid Gauge) How to generate gauge dial with an arrow end.

Question

我正在尝试使用 Highcharts (实心表)创建自定义数据刻度盘。

请帮帮我。

我无法生成像实心仪表尖刻度盘那样的箭头端。这是我当前的图表:

更新代码:请复制粘贴下面提供的 fiddle 链接中的代码:

$(function() {

var gaugeOptions = {

chart: {
  type: 'solidgauge',
  height: 80,
  width: 120,
  backgroundColor: null
},

title: null,

pane: {
  center: ['50%', '60%'],
  size: '100%',
  startAngle: -90,
  endAngle: 90,
  background: {
    innerRadius: '60%',
    outerRadius: '100%',
    shape: 'arc'
  }
},
credits: {
  enabled: false
},

tooltip: {
  enabled: false
},

plotOptions: {
  solidgauge: {
    dataLabels: {
      y: 5,
      borderWidth: 0,
      useHTML: true
    }
  },
  gauge: {
    dial: {
      baseWidth: 1,
      topWidth: 1
    },
    pivot: {
     radius: 3,
     borderWidth: 1
     }
    }
  }
};

  // The speed gauge
  $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
       min: 0,
       max: 5,
       tickPositions: [],
       plotBands: [{ // mark the weekend
      color: {
      linearGradient: [0, 0, 300, 0],
      stops: [
        [0.1, '#55BF3B'], // green
        [0.2, '#DDDF0D'], // yellow
        [0.3, '#DF5353']
      ]
      },
      from: 0,
      to: 5,
      innerRadius: '60%',
      outerRadius: '100%',
  }],
},
series: [{
  name: 'Ship Average',
  type: 'gauge',
  data: [2],

  color: {
    linearGradient: [0, 0, 300, 0],
    stops: [
      [0.1, '#55BF3B'], // green
      [0.25, '#DDDF0D'], // yellow
      [0.4, '#DF5353']
    ]
  },
  dataLabels: {
    format: '<span style="font-size:10px;color:grey;">{y} delays</span></div>',
    y: 30,
    borderWidth: 0
  },
  tooltip: {
    valueSuffix: ' days'
  }
  }]

}));
});

http://jsfiddle.net/n9gfeor2/29/

预期结果:

Answer 1

可以通过包装拨号方法(翻译)和编辑路径来实现。

    point.shapeArgs = {
      d: dialOptions.path || [
      'M', -rearLength, -baseWidth / 2,
                          'L',
                          baseLength, -baseWidth / 2,
                          radius, -topWidth / 2,
                          radius - 10, -topWidth / 2 - 10,
                          'M',
                          radius, -topWidth / 2,
                          'L',
                          radius - 10, -topWidth / 2 + 10,
                          'M',
                          radius, -topWidth / 2,
                          baseLength, baseWidth / 2, -rearLength, baseWidth / 2,
                          'z'
    ],

简单演示:

• http://jsfiddle.net/L488w1as/