如何在负条上打破y轴

时间:2015-07-03 10:29:01

标签: highcharts

我正试图在栏“D”(链接下方)上显示休息符号 它是积极的,但不是负面的。

谢谢你的帮助!

我的链接:http://jsfiddle.net/kzLon27v/1/

Highcharts:Visualized axis break

  $(function () {

    /**
     * Extend the Axis.getLinePath method in order to visualize breaks with two parallel
     * slanted lines. For each break, the slanted lines are inserted into the line path.
     */
    Highcharts.wrap(Highcharts.Axis.prototype, 'getLinePath', function (proceed, lineWidth) {
        var axis = this,
            path = proceed.call(this, lineWidth),
            x = path[1];

        Highcharts.each(this.breakArray || [], function (brk) {
            var y;
            if (!axis.horiz) {
                y = axis.toPixels(brk.from);
                path.splice(3, 0,
                    'L', x, y - 4, // stop
                    'M', x + 5, y - 9, 'L', x - 5, y + 1, // lower slanted line
                    'M', x + 5, y - 1, 'L', x - 5, y + 9, // higher slanted line
                    'M', x, y + 4
                    );
            }
        });
        return path;
    });

    /**
     * On top of each column, draw a zigzag line where the axis break is.
     */
    function pointBreakColumn(e) {
        var point = e.point,
            brk = e.brk,
            shapeArgs = point.shapeArgs,
            x = shapeArgs.x,
            y = this.toPixels(brk.from, true),
            w = shapeArgs.width,
            key = ['brk', brk.from, brk.to],
            path = ['M', x, y, 'L', x + w * 0.25, y + 4, 'L', x + w * 0.75, y - 4, 'L', x + w, y];

        if (!point[key]) {
            point[key] = this.chart.renderer.path(path)
                .attr({
                    'stroke-width': 3,
                    stroke: point.series.options.borderColor
                })
                .add(point.graphic.parentGroup);
        } else {
            point[key].attr({
                d: path
            });
        }
    }

    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Visualized axis break'
        },
        xAxis: {
            categories: ['']
        },
        yAxis: {
            lineColor: 'black',
            lineWidth: 2,
            title: false,
            tickInterval: 1000,
            breaks: [{
                from: -60000,
                to: -12000
            }],
            events: {
                pointBreak: pointBreakColumn
            }
        },
        series: [{
            name: 'A',
            data: [30000]
        }, {
            name: 'B',
            data: [50000]
        }, {
            name: 'C',
            data: [-8000]
        }, {
            name: 'D',
            data: [-60000]
        }]

    });
});

0 个答案:

没有答案