HighCharts：（ソリッドゲージ）矢印の端にゲージダイヤルを生成する方法。

Question

ハイチャート（ソリッドゲージ）を使用してカスタムデータダイヤルを作成しようとしています。

私を助けてください。

ソリッドゲージの先端ダイヤルのような矢印の端を生成することができません。これは私の現在のチャートである。

更新されたコード：

$(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/