2021SC@SDUSC

Coordinate axis

to configure

xAxis: the x axis in the rectangular coordinate system grid.

xAxis.show  : Whether the x-axis is displayed. The default is true.

xAxis.gridIndex  : The index of the grid where the x-axis is located. It is located on the first grid by default. The default value is 0.

xAxis.position: the position of the x-axis.

Optional: 'top''bottom'
The first X-axis in the default grid is below the grid ('bottom '), and the second x-axis is placed on the other side according to the position of the first x-axis.

xAxis.offset: the offset of the X axis from the default position. It is useful when there are multiple x axes on the same position.

xAxis.type  : Axis type. Optional:

'value' value axis, applicable to continuous data.
'category' category axis is applicable to discrete category data. Category data must be set through data for this type.
'time 'time axis is applicable to continuous time series data. Compared with the numerical axis, the time axis has time formatting and is different in scale calculation. For example, the scale of month, week, day or hour range will be determined according to the span range.
'log' pairs the number axis. Applies to logarithmic data.

xAxis.name   : Axis name.

xAxis.nameLocation: axis name display location.

Optional: 'start', 'middle', 'end'

xAxis.min: minimum value of coordinate axis scale. It can be set to the special value 'dataMin'. At this time, the minimum value of data on this axis is taken as the minimum scale. When not set, the minimum value will be calculated automatically to ensure the uniform distribution of coordinate axis scale.

xAxis.max   : Axis scale maximum. It can be set to the special value 'dataMax'. At this time, the maximum value of data on this axis is taken as the maximum scale. When not set, the maximum value will be calculated automatically to ensure the uniform distribution of coordinate axis scale.

yAxis: y axis in rectangular coordinate system.

The basic configuration is the same as the x-axis.

Public documents

There are several common files in coordinate axis components such as rectangular coordinate system d and polar coordinate system.

AxisView

AxisView extends from the Component Model through the extendComponentView method, rewrites the render, remove and dispose methods, and defines the updateAxisPointer method.

AxisBuilder

AxisBuilder defines the rendering methods of axisLine, axisTickLabel and axisName. The main codes are as follows:

var builders = {
    axisLine: function () {
        ...

        this.group.add(new graphic.Line(graphic.subPixelOptimizeLine({
            // Id for animation
            anid: 'line',

            shape: {
                x1: pt1[0],
                y1: pt1[1],
                x2: pt2[0],
                y2: pt2[1]
            },
            style: lineStyle,
            strokeContainThreshold: opt.strokeContainThreshold || 5,
            silent: true,
            z2: 1
        })));

        var arrows = axisModel.get('axisLine.symbol');
        var arrowSize = axisModel.get('axisLine.symbolSize');

        var arrowOffset = axisModel.get('axisLine.symbolOffset') || 0;
        if (typeof arrowOffset === 'number') {
            arrowOffset = [arrowOffset, arrowOffset];
        }

        if (arrows != null) {
            ...
            each([{
                rotate: opt.rotation + Math.PI / 2,
                offset: arrowOffset[0],
                r: 0
            }, {
                rotate: opt.rotation - Math.PI / 2,
                offset: arrowOffset[1],
                r: Math.sqrt((pt1[0] - pt2[0]) * (pt1[0] - pt2[0])
                    + (pt1[1] - pt2[1]) * (pt1[1] - pt2[1]))
            }], function (point, index) {
                // Create arrow symbol
                if (arrows[index] !== 'none' && arrows[index] != null) {
                    var symbol = createSymbol(
                        arrows[index],
                        -symbolWidth / 2,
                        -symbolHeight / 2,
                        symbolWidth,
                        symbolHeight,
                        lineStyle.stroke,
                        true
                    );

                    // Calculate arrow position with offset
                    var r = point.r + point.offset;
                    var pos = [
                        pt1[0] + r * Math.cos(opt.rotation),
                        pt1[1] - r * Math.sin(opt.rotation)
                    ];

                    symbol.attr({
                        rotation: point.rotate,
                        position: pos,
                        silent: true,
                        z2: 11
                    });
                    this.group.add(symbol);
                }
            }, this);
        }
    },

    axisTickLabel: function () {
        var axisModel = this.axisModel;
        var opt = this.opt;
        // Render tick and label through graphic.Line and graphic.Text respectively
        var tickEls = buildAxisTick(this, axisModel, opt);
        var labelEls = buildAxisLabel(this, axisModel, opt);

        fixMinMaxLabelShow(axisModel, labelEls, tickEls);
    },

    axisName: function () {
        ...
        var textEl = new graphic.Text({
            // Id for animation
            anid: 'name',

            __fullText: name,
            __truncatedText: truncatedText,

            position: pos,
            rotation: labelLayout.rotation,
            silent: isSilent(axisModel),
            z2: 1,
            tooltip: (tooltipOpt && tooltipOpt.show)
                ? extend({
                    content: name,
                    formatter: function () {
                        return name;
                    },
                    formatterParams: formatterParams
                }, tooltipOpt)
                : null
        });

        graphic.setTextStyle(textEl.style, textStyleModel, {
            text: truncatedText,
            textFont: textFont,
            textFill: textStyleModel.getTextColor()
                || axisModel.get('axisLine.lineStyle.color'),
            textAlign: labelLayout.textAlign,
            textVerticalAlign: labelLayout.textVerticalAlign
        });
        ...

        // FIXME
        this._dumbGroup.add(textEl);
        textEl.updateTransform();

        this.group.add(textEl);

        textEl.decomposeTransform();
    }

};

AxisModelCreator

AxisModelCreator is a method for generating AxisModel. It extends getCategories, getOrdinalMeta, mergeDefaultAndTheme and other methods on the basis of AxisModel, rewrites the defaultOption attribute, and uses:

ComponentModel.registerSubTypeDefaulter(
    axisName + 'Axis',
    zrUtil.curry(axisTypeDefaulter, axisName)
);

To register the corresponding Axis subclasses, such as xAxis, yAxis, radiusAxis and angleAxis.