我正在使用高级图表来渲染堆积条形图。

当用户单击特定系列时,如何在堆积条形图上获得边框?我尝试了标记选项,但是只选择了一个系列,但是我希望选择整个系列。

目前我正在这样:



但是,我想要这样:-

最佳答案

您可以使用渲染器在后台添加这样的矩形:http://jsfiddle.net/3Utat/25/

    mouseOver: function () {
        var chart = this.series.chart,
            r = chart.renderer,
            shape = this.shapeArgs, // shape args for the points rect element
            xAxis = this.series.xAxis,
            yAxis = this.series.yAxis,
            y = yAxis.toPixels(this.total), // top left y-position of the rect
            x = this.plotX + chart.plotLeft - shape.width / 2, // point position + left offset + half width
            height = yAxis.toPixels(yAxis.min) - y; // bottom - top

        if (chart.hoverStack) {
            chart.hoverStack.destroy();
        }

        chart.hoverStack = r.rect(x, y, shape.width, height).attr({
                'stroke-width': 6, //border width
                'stroke': 'black', //border color
                'fill': 'transparent' //transparent fill color
        }).add();

    },
    mouseOut: function () {
        if (this.series.chart.hoverStack) {
            this.series.chart.hoverStack.destroy();
            this.series.chart.hoverStack = false;
        }
    }


示例使用的是mouseOvermouseOut事件,但是在您的情况下,可以改用click事件。

关于jquery - 条形图+ Highcharts 中选定系列的边框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28692598/

10-09 15:27
查看更多