1

私の質問は Highchartsの質問に似ています:縦棒グラフに特別なマーカーを表示する

特定の期間の投資信託のリターンのヒストグラムである縦棒グラフがあります。投資信託がどこに該当するかを特別なマーカーで強調したいと思います。

たとえば、x軸に-50から-25、-25から0、0から10、10から20、20から30、30から50があり、対応するY値があるとします。「20から30」のマーカーで強調表示して、投資信託がそのバケットに分類されることを示したいと思います。http://www.highcharts.com/demo/spline-symbolsのようなスプラインチャートを使用してこれを行うことができることを私は知っています。

縦棒グラフでも同じことをする方法はありますか?

4

1 に答える 1

2

通常、カスタムマーカーを縦棒グラフに追加することはできませんが、同様の動作を追加することはできます。スキャッターシリーズのカスタムマーカーを使用した簡単な例を作成しました。凡例にシリーズを追加する場合に便利です: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

于 2013-02-18T12:35:49.250 に答える