gpt4 book ai didi

javascript - 在 billboard.js 中控制 x 轴刻度的多行传播

转载 作者:行者123 更新时间:2023-11-30 14:46:55 24 4
gpt4 key购买 nike

正在关注 one example我们可以格式化刻度文本。我看到这设置为 multiline: 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>JS Bin</title>
</head>

<body>
<div id="tick"></div>
<script>
var chart = bb.generate({
data: {
x: "x",
columns: [
["x", "2010-01-01", "2011-01-01", "2012-01-01", "2013-01-01", "2014-01-01", "2015-01-01"],
["sample", 30, 200, 100, 400, 150, 250]
]
},
size: {
width: 500,
height: 250
},
legend: {
show: false
},
axis: {
x: {
height: 100,
type: "timeseries",
tick: {
rotate: -75,
format: function (x) {
return x.getFullYear() + ' control this line breaking ';
}
}
}
},
bindto: "#tick",
});
</script>
</body>

</html>

最佳答案

没有 <br>对于 svg 文本节点。换行需要加一个<tspan>每行文本的节点。

此时,您可以使用 axis.x.tick.width 处理换行选项。

axis: {
x: {
tick: {
width: 80
}
}
},

关于javascript - 在 billboard.js 中控制 x 轴刻度的多行传播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48766179/

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