0
A
回答
4
你可以尝试在数据的末尾添加一个假的(零)点,然后没有表现出这一点,给自己在x轴的更多的空间。
对于y轴,您可以故意设置y轴值。
下面是一个例子:http://jsfiddle.net/bfcnzm1z/
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01', '2016-01-01'],
['sample', 1.2, 2.3, 0.5, 0.8, 1.5, 2, null]
]
},
axis: {
x: {padding: {right:200},
type: 'timeseries',
tick: {
format: function (x) {
return x.getFullYear();
},
outer: false,
values: ['2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01']
}
},
y: {
tick: {
format: d3.format('d'),
outer: false,
values: [0,1,2]
}
}
}
});
0
一旦图形被加载
var $chartContainer = $('.c3');
var $lastTick = $chartContainer.find('.c3-axis.c3-axis-x .tick').last();
var translateValue = parseInt($lastTick.attr('transform').replace('translate(', ''),10);
var tickWidth = $lastTick[0].getBoundingClientRect().width/2;
$lastTick.attr('transform', 'translate(' + (translateValue - tickWidth) + ',0)');
1
第一个麻烦是由日期较晚所造成超出SVG范围您还可以使用jQuery解决这个问题。所以你可以通过添加
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01', '2016-01-01'],
['sample', 1.2, 2.3, 0.5, 0.8, 1.5, 2]
]
},
padding: {
right: 22
}
}
相关问题
- 1. C3 JS:大轴标签
- 2. c3.js折线图数据标签文本重叠
- 3. 谷歌图表轴标签问题折线图
- 4. 如何将图像添加到c3.js折线图
- 5. 圣拉斐尔折线图轴标签与轴线
- 6. C3图形重叠的x轴标签
- 7. 导出c3.js折线图到PNG图像不起作用
- 8. 将新数据加载到C3.js折线图
- 9. 用openpyxl绘制折线图 - 坐标轴/绘图问题
- 10. C3.JS:在折线图上只显示一条加载线
- 11. 轴标签问题
- 12. 删除c3折线图的填充
- 13. D3.js折线图重叠问题
- 14. C3.js线图表错误
- 15. c3.js饼图标题总计数
- 16. 折线图问题
- 17. c3.js如何更新chart.load()上的x轴标签?
- 18. 是否可以为c3.js加载新的y轴标签?
- 19. C3.js的格式问题
- 20. C3折线图:远点之间的压缩或折断间隔
- 21. D3.js组合条形图和折线图x轴误差问题
- 22. 如何旋转nvd3.js折线图的x轴的文本标签
- 23. C3.js,y轴时间
- 24. 如何使倒线图上在c3.js
- 25. SSRS图形轴标签问题
- 26. R图:问题与y轴标签
- 27. 图表轴标签间隔问题
- 28. 剑道图y轴标签问题
- 29. excel宏 - 折线图失去年轴值和图表标题
- 30. x轴自定义标签nvd3折线图angularjs
我可以给svg填充区域我试图澄清这两个问题。它也可能有助于[编辑你的问题](http://stackoverflow.com/posts/29413916/edit)并显示你的相关代码。 – showdev 2015-04-02 17:15:11