javascript - 在对 Angular 线上显示 yAxis 标签

Question

我得到example来自 Highcharts :

我想使 yAxis 标签(例如 0k,50k..)不在垂直线上

但在像这样的对 Angular 线上

我一直在 highchart 的文档上搜索，但找不到在 yAxis 标签上执行此操作的某些属性，或者也许我错了，我在 highchart's docs 上尝试了一些属性但还是没有运气

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

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

Answer 1

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

或者负责定位该点并编辑半径以使用不同于axis.startAngleRad的包装方法: http://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);