在对角线上显示yAxis标签

时间:2015-07-08 03:33:21

标签: javascript highcharts

我从highcharts获得example

我想在垂直线上制作yAxis标签(0k,50k ......示例)

enter image description here

但是在像这张图片的对角线上

enter image description here

我一直在搜索高保真的文档,但在yAxis标签上找不到某些属性,或者我错了,我已尝试{{3但仍然没有运气

yAxis: {
    gridLineInterpolation: 'polygon',
    lineWidth: 0,
    min: 0,
    labels: {
      ...
    }
},

请建议如何做到这一点 非常感谢!

1 个答案:

答案 0 :(得分:1)

您可以使用pane.startAngle旋转整个图表,请参阅:http://jsfiddle.net/xEAxK/381/

或者包装方法负责定位点和编辑半径使用不同于axis.startAngleRadhttp://jsfiddle.net/xEAxK/385/

代码:

(function (H) {
    H.wrap(H.Tick.prototype, 'getLabelPosition', function (proceed, x, y, label, horiz, labelOptions, tickmarkOffset, index, step) {
        var rot = this.axis.isXAxis ? this.axis.startAngleRad : -2.5 * Math.PI / 4,
            origRot = this.axis.startAngleRad,
            axis = this.axis,
            optionsY = labelOptions.y,
            ret;

        axis.startAngleRad = rot;

            centerSlot = 20, // 20 degrees to each side at the top and bottom
            align = labelOptions.align,
            angle = ((axis.translate(this.pos) + rot + Math.PI / 2) / Math.PI * 180) % 360;


        if (axis.isRadial) {
            ret = axis.getPosition(this.pos, (axis.center[2] / 2) + H.pick(labelOptions.distance, -25));

            // Automatically rotated
            if (labelOptions.rotation === 'auto') {
                label.attr({
                    rotation: angle
                });

                // Vertically centered
            } else if (optionsY === null) {
                optionsY = axis.chart.renderer.fontMetrics(label.styles.fontSize).b - label.getBBox().height / 2;
            }

            // Automatic alignment
            if (align === null) {
                if (axis.isCircular) {
                    if (this.label.getBBox().width > axis.len * axis.tickInterval / (axis.max - axis.min)) { // #3506
                        centerSlot = 0;
                    }
                    if (angle > centerSlot && angle < 180 - centerSlot) {
                        align = 'left'; // right hemisphere
                    } else if (angle > 180 + centerSlot && angle < 360 - centerSlot) {
                        align = 'right'; // left hemisphere
                    } else {
                        align = 'center'; // top or bottom
                    }
                } else {
                    align = 'center';
                }
                label.attr({
                    align: align
                });
            }

            ret.x += labelOptions.x;
            ret.y += optionsY;

        } else {
            ret = proceed.call(this, x, y, label, horiz, labelOptions, tickmarkOffset, index, step);
        }
        axis.startAngleRad = origRot; 
        return ret;
    });
})(Highcharts);