删除c3折线图的填充
Remove padding of c3 line chart
我有一个x轴类的c3折线图。
var data = {
x: "x",
columns: [
["x", "a", "b", "c", "d"],
["data1", 0, 1, 2, 3],
["data2", 3, 2, 1, 0],
],
labels: true
};
var axis = {
x: {
type: 'category',
tick: {
centered: true,
},
padding: 0
},
y: {
padding: {bottom:5, top:5}
}
};
ccChartL = c3.generate({
bindto: '#ccLdiv',
data: data,
axis: axis,
transition:{duration: 1000}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<div id="ccLdiv"></div>
在左边,直线的起点和轴之间有一个间隙。右边也是。如何移除它?我希望行的开头,类别a,在x值0处。我尝试了Stackoverflow的视图答案,但没有成功。填充设置为0。如果我把它设置为任何正值,它只会缩小更多。提前谢谢。
-0.5或稍小(-0.49)的负填充将消除这些间隙。
然而,它会稍微切断你的第一个和最后一个标签,你可能需要某种公式,例如
padding: -0.5 - (0.01 * no_of_datapoints)
相关文章:
- 用与线条相同的颜色填充多折线图上的点
- 跟踪jqplot垂直折线图的鼠标位置
- Morris.js折线图x轴标签在调整大小后消失
- Chart.js V2折线图缺点
- 将直流图表库中的折线图缩放限制为小时
- 如何用d3.js绘制折线图
- 部分填充区域的折线图
- 将时间缩放添加到折线图(Chart.js)
- Chart.js折线图的0线型
- d3绘制动画折线图的基本示例
- Javascript FLOT组合条形图;以x轴为字符串的折线图
- 如何在折线图中显示最近的值
- charts js更改折线图轴的字体大小/颜色和背景线
- 从特定系列的谷歌可视化折线图中删除悬停工具提示
- 折线图上的渐变填充(高图表)
- 无法填充Google Graph折线图
- gRaphael折线图:用JSON数据填充弹出标签而不是x&y坐标
- 删除c3折线图的填充
- 使用Canvas的SVG可视化-折线图填充黑色矩形,"ERROR: Element 'parserer
- 从csv填充折线图