通常、カスタムマーカーを縦棒グラフに追加することはできませんが、同様の動作を追加することはできます。スキャッターシリーズのカスタムマーカーを使用した簡単な例を作成しました。凡例にシリーズを追加する場合に便利です:http://jsbin.com/oyudan/37/edit(そうでない場合は、設定するだけですshowInLegend: false
)
Highcharts.updateMarketMarkers = function (chart) {
/* get category width */
var catWidth = chart.xAxis[0].width / chart.xAxis[0].categories.length;
/* get padding of each column (two sides) */
var catPadding = chart.series[0].options.pointPadding * catWidth;
/* actual value - padding - symbol width/2 */
chart.series[2].markerGroup.translate(chart.series[2].markerGroup.translateX - 2 * catPadding - chart.series[2].data[0].shapeArgs.r / 2);
};
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
showAxes: false,
events: {
load: function () {
Highcharts.updateMarketMarkers(this);
},
redraw: function () {
Highcharts.updateMarketMarkers(this);
}
}
},
...
別の解決策は、Highchartsレンダラーを使用して特定の場所にカスタムシェイプを描画することです。ここでレンダラーの詳細を見つけることができます:http://api.highcharts.com/highcharts#Renderer