在Billboard.js中对齐同一图表上的多个y轴

Question

图表包含相对于两个Y轴y和y2定位的数据。

这就是它的样子：

因此，红线是用一个y轴生成的，而条形用另一个生成。

在这种情况下，红线的值总是正值（值为13.91，但线条看起来大约为-5），但因为轴没有对齐，所以看起来不太好。

代码：

const chartDataConfig = {
    data: {
        columns: series.columns,
    },
    ...
    axis: {
        x: {
            label: {
                text: context.labels.xLabel,
            },
        },
        y: {
            label: {
                text: context.labels.yLabel,
            },
        },
        y2: {
            label: {
                text: context.labels.y2Label,
            },
        },
    },
    ...
};

和

function getDefaultConfig() {
    return {
        data: {
            x: "x",
        },
        ...
        axis: {
            x: {
                ...
            },
            y: {
                label: {
                    position: "outer-middle"
                },
            },
            y2: {
                show: true,
                label: {
                    position: "outer-middle"
                },
            },
        },
        bindto: "#my-chart"
    };
}

有没有办法对齐这两个轴以便从同一点开始？

Answer 1

我不确定您的情况是否“对齐”，但如果您需要使y和y2轴具有相同的比例视图，请设置相同的min和{{1轴值。

查看示例。

max

var chart = bb.generate({
	data: {
		columns: [
			["data1", 30, 20, -5, 40, 15, 25],
			["data2", 3, 10, 20, 10, 25, 15]
		],
		colors: {
			data2: "red"
		},
		types: {
			data1: "bar"
		},
		axes: {
			data1: "y",
			data2: "y2"
		}
	},
	axis: {
		y: {
			min: -10,
		        max: 35
		    },
		y2: {
			min: -10,
			max: 35,
			show: true
	    	}
	}
});