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

【问题标题】：Align multiple y-axes on the same chart in Billboard.js在 Billboard.js 中的同一图表上对齐多个 y 轴
【发布时间】：2018-02-20 16:28:42
【问题描述】：

图表包含相对于两个 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"
    };
}

有什么方法可以对齐这两个轴以便从同一点开始？

【问题讨论】：

标签： javascript d3.js charts billboard.js

【解决方案1】：

我不确定您的情况是否“对齐”，但如果您需要使 y 和 y2 轴具有相同的比例视图，请设置相同的 min 和 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
	    	}
	}
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
    <title>billboard.js</title>
</head>
<body>
  <div id="chart"></div>
</body>
</html>

【讨论】：

我认为他想让 y 和 y2 轴使两个轴的 0 点水平对齐，而不是尝试获得相同的比例视图和/或相同的最大值。此外，让 y 和 y2 轴具有相同的比例、最小值、最大值，这难道不会违背拥有两个轴的目的吗？
@bgiuga，在这种情况下，只需为两个轴设置相同的 min 值即可满足需求。但是，正如我在开头指出的那样，我不知道需求的确切目的。
@JaeSungPark 如果两个 Y 轴具有不同的比例（这很常见），则仅设置最小值似乎不够。匹配最小值仅意味着图表底部从相同的数字开始，但“0”位置不会在两者之间排列。每当有正数和负数但比例不同的系列时，这都会产生一些令人困惑的视觉效果。有一种方法可以对齐 y 轴的零位置会很好，但我知道这可能不是一个非常常见的请求。