C3.js将折线图Y轴的标签位置更改为Y轴的中心 [英] C3.js change label position of Line Chart Y axis to center up of Y axis
本文介绍了C3.js将折线图Y轴的标签位置更改为Y轴的中心的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要在Y轴上更改Y轴的标签位置，当前的六个位置选项无法满足我的情况，我也尝试使用d3对其进行自定义，但仍然没有运气.
I need to change the Y axis's label position upon the Y axis, the current six position options can't meet my scenario, I also tried to customize it with d3 but still without luck.
var chart = c3.generate({
data: {
columns: [
['data', 30, 200, 100, 400, 150, 250]
]
},
axis: {
y: {
label: {
text: 'Y Axis Label',
position: 'outer-top'
}
}
}
});
有人知道怎么做吗?
非常感谢.
推荐答案
与您所说的不同，您可以使用D3对其进行自定义.只需选择标签(按类别)并设置transform:
Unlike what you said, you can customize it with D3. Just select the label (by class) and set the transform:
d3.select(".c3-axis-y-label").attr("transform", "translate(25,30)")
这是演示:
// Code goes here
(function() {
var chart = c3.generate({
padding: {
top: 10
},
data: {
columns: [
['data', 30, 200, 100, 400, 150, 250]
]
},
axis: {
y: {
label: {
text: 'Y Axis Label',
position: 'outer-top'
}
}
}
});
d3.select(".c3-axis-y-label").attr("transform", "translate(25,30)")
})();
<head>
<link rel="stylesheet" href="https://unpkg.com/c3@0.4.14/c3.css">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/d3@3.5.6/d3.js"></script>
<script src="https://unpkg.com/c3@0.4.14/c3.js"></script>
</head>
<body>
<div id="chart"></div>
<script src="script.js"></script>
</body>
这篇关于C3.js将折线图Y轴的标签位置更改为Y轴的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
