gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 02:27:19 26 4
gpt4 key购买 nike

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

它是这样的:

enter image description here

因此,红线由一个 y 轴生成,条形由另一个 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"
};
}

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

最佳答案

我不确定您的情况下的“对齐”,但如果您需要使 yy2 轴具有相同的比例 View ,请设置相同的 minmax 轴值。

查看示例。

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>

关于javascript - 在 Billboard.js 中对齐同一图表上的多个 y 轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48889852/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com