C3 刻度线在 API 加载调用后未与数据对齐
C3 Tick marks not lining up with data after API Load call
此代码用于我们在用户个人资料中显示的图表。它是一个图表,显示特定日期范围(每周、每月、每年、生命周期)的统计数据。无论我们将默认范围设为什么范围,刻度线都与数据点完美对齐。每当他们选择不同的间隔时,刻度线就不再排列。
初始生成图表:
this.chartSpline = C3.generate({
bindto: '.splineChart',
colors:'#1BA39C',
data: {
xFormat: '%m-%d-%Y',
columns: [this.columns, this.rows],
type: 'area-spline',
x: 'Date',
},
padding: {
right: 100,
left: 100,
},
axis: {
x: {
type : 'timeseries',
tick:{
fit: true,
count: this.rows.length/2,
format: '%m/%d',
},
padding:{
left:0,
right: 10
}
},
y: {
padding:{
top:50,
bottom: 0
},
label: {
text: 'Minutes played',
position: 'outer-middle'
}
}
},
point: {
r: 8,
},
legend: {
show: false
}
});
上面的代码在一个backbone视图中,然后我们加载另一个具有加载功能的backbone视图。当用户选择新的日期范围时调用加载函数:
this.plot.load({columns: [columns, rows]});
如果您能为我提供任何帮助,我们将不胜感激。谢谢!
我去掉了这段代码:
count: this.rows.length/2,
现在工作正常
此代码用于我们在用户个人资料中显示的图表。它是一个图表,显示特定日期范围(每周、每月、每年、生命周期)的统计数据。无论我们将默认范围设为什么范围,刻度线都与数据点完美对齐。每当他们选择不同的间隔时,刻度线就不再排列。
初始生成图表:
this.chartSpline = C3.generate({
bindto: '.splineChart',
colors:'#1BA39C',
data: {
xFormat: '%m-%d-%Y',
columns: [this.columns, this.rows],
type: 'area-spline',
x: 'Date',
},
padding: {
right: 100,
left: 100,
},
axis: {
x: {
type : 'timeseries',
tick:{
fit: true,
count: this.rows.length/2,
format: '%m/%d',
},
padding:{
left:0,
right: 10
}
},
y: {
padding:{
top:50,
bottom: 0
},
label: {
text: 'Minutes played',
position: 'outer-middle'
}
}
},
point: {
r: 8,
},
legend: {
show: false
}
});
上面的代码在一个backbone视图中,然后我们加载另一个具有加载功能的backbone视图。当用户选择新的日期范围时调用加载函数:
this.plot.load({columns: [columns, rows]});
如果您能为我提供任何帮助,我们将不胜感激。谢谢!
我去掉了这段代码:
count: this.rows.length/2,
现在工作正常