我正在尝试按照C3.js网站上的示例,为图表提供自定义的x轴标签。
期望的结果应该像这样: desired-output
我已经尝试了C3.js提供的“X Axis Tick Values”示例,但没有成功:c3js.org/samples/axes_x_tick_values.html。
我尝试了使用“timeseries”和“category”(都不行),参考了这个示例:...c3js.org/samples/categorized.html
这是我在JS Fiddle上的一个尝试:https://jsfiddle.net/qvsdvh8w/9/
以下是JavaScript代码:
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017],
['open cases', 0, 7, 10, 12, 14, 19, 12, 17, 19, 18, 23, 24, 33, 42, 54, 63, 52, 51],
['total budget', 0, 1359300, 1700900, 2248200, 2417400, 2966846, 2966846, 2658700, 3009082, 3919996, 4212200, 4319972, 4882937, 5026751, 5671243, 5059538, 5896239, 6289674]
],
axes: {
'total budget': 'y2'
},
types: {
'open cases': 'bar' // ADD
}
},
axis: {
y: {
label: {
text: 'open cases',
position: 'outer-middle'
}
},
y2: {
show: true,
label: {
text: 'total budget',
position: 'outer-middle'
}
}
},
x: {
type: 'timeseries',
tick: {
values: ['FY00', 'FY01', 'FY02', 'FY03', 'FY04', 'FY05', 'FY06', 'FY07', 'FY08', 'FY09', 'FY10', 'FY11', 'FY12', 'FY13', 'FY14', 'FY15', 'FY16', 'FY17']
},
},
});
我还尝试了按照这里展示的方法进行标签,其中字符串值是在x轴数据列中提供的。然而,这种方法彻底破坏了图表:
...c3js.org/samples/axes_x_tick_rotate.html
请问您能帮我理解一下我做错了什么吗?或者这是C3.js的限制吗?
非常感谢您分享知识和见解!
x:
不在axis:
内部,它们是兄弟节点,因为在声明x:
之前有一个多余的闭合}
括号。 - mgraham