Question

我的问题类似于中的问题 Highcharts: Show special marker on column chart

我有一个柱形图，它是特定时期内共同基金回报的直方图。我想通过特殊标记突出显示感兴趣的共同基金的位置。

比如说，我的x轴上有-50到-25，-25到0,0到10,10到20,20到30和30到50，以及相应的Y值。我想用'20到30'上的标记突出显示感兴趣的共同基金属于那个桶。我知道我们可以使用像http://www.highcharts.com/demo/spline-symbols这样的样条图表来做到这一点。

有没有办法对柱形图进行相同的操作？

Answer 1

通常，您无法将自定义标记添加到柱形图，但您可以添加类似的行为。我已经为散点系列创建了自定义标记的简单示例，如果您想在图例中添加更多系列，则非常有用：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

柱形图上的highcharts特殊标记

1 个答案: