当我更改折线图标题的大小时，它重叠，并且x和y属性不起作用。但根据这个pull request，它应该有效。
我发现这是因为它在图表的SVG中。并且SVG的大小由配置控制，但改变图表的大小无法解决它。
// Code goes here
(function(){
var chart = c3.generate({
title: {
text: 'My Line Chart',
y: 100
},
data: {
columns: [
['data', 30, 200, 100, 400, 150, 250]
]
},
legend: {
position: 'inset'
},
grid: {
y: {
show: true
}
},
axis: {
y: {
label: {
text: 'Y Axis Label',
position: 'outer-top'
}
}
}
});
d3.select('#chart .c3-title')
.style('font-size', '4em')
})();/* Styles go here */
#chart {
margin: 40px;
}<!DOCTYPE html>
<html>
<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>
</html>
任何建议都将不胜感激。
答案 0 :(得分：2)
只需在顶部添加填充...
<field name="domain_force">[('category.viewers.ids', 'contains', user.id)]</field>
...并将文字的padding: {
top: 20
}
设置为dominant-baseline：
central或者，只需将其翻译下来。
以下是具有该更改的代码：
.style("dominant-baseline", "central")
// Code goes here
(function(){
var chart = c3.generate({
padding: {
top: 20
},
title: {
text: 'My Line Chart',
y: 100
},
data: {
columns: [
['data', 30, 200, 100, 400, 150, 250]
]
},
legend: {
position: 'inset'
},
grid: {
y: {
show: true
}
},
axis: {
y: {
label: {
text: 'Y Axis Label',
position: 'outer-top'
}
}
}
});
d3.select('#chart .c3-title')
.style('font-size', '4em')
.style("dominant-baseline", "central")
})();/* Styles go here */
#chart {
margin: 40px;
}