Flotcharts barChart 第一个和最后一个条被切断
Flotcharts barChart first and last bar cut off
我正在使用 Flot Charts 和 AngularJs 的组合来显示条形图。
最初该图表被创建为折线图。
条形图使用时间模式,显示数据以时间戳链接。
图表选项:
$scope.chartOptions = {
series : {
bars: {
show: true,
barWidth: 60*60*60*60,
align: 'center'
}
},
grid : {
borderColor : '#eee',
borderWidth : 1,
backgroundColor: null,
clickable: true
},
yaxis:{
minTickSize: 0,
tickDecimals: 0
},
xaxis: {
mode: "time",
tickSize: [1, 'day'],
timeformat: "%d %b",
minTickSize: 7,
timezone: 'browser'
},
shadowSize : 0
};
图表数据:
[[1445814000000,3],[1445900400000,3],[1445986800000,15],[1446073200000,9]]
图表显示如下:
http://puu.sh/lgi6e/83f61cbf8c.png
如何完整显示第一个(和最后一个)柱?
我不能评论所以我会回答!
当我将您提供的代码插入 Flot 时,它工作正常,图表在左侧显示了完整的条形图,我在这里创建了一个快速 Fiddle:http://fiddle.jshell.net/6xpLey6e/1/ 和使用 IE 和 Chrome.
检查
[将barwidth改为barWidth: 24 * 60 * 60 * 1000,for full width bars]
一定有其他原因在起作用。
我正在使用 Flot Charts 和 AngularJs 的组合来显示条形图。 最初该图表被创建为折线图。 条形图使用时间模式,显示数据以时间戳链接。
图表选项:
$scope.chartOptions = {
series : {
bars: {
show: true,
barWidth: 60*60*60*60,
align: 'center'
}
},
grid : {
borderColor : '#eee',
borderWidth : 1,
backgroundColor: null,
clickable: true
},
yaxis:{
minTickSize: 0,
tickDecimals: 0
},
xaxis: {
mode: "time",
tickSize: [1, 'day'],
timeformat: "%d %b",
minTickSize: 7,
timezone: 'browser'
},
shadowSize : 0
};
图表数据:
[[1445814000000,3],[1445900400000,3],[1445986800000,15],[1446073200000,9]]
图表显示如下: http://puu.sh/lgi6e/83f61cbf8c.png
如何完整显示第一个(和最后一个)柱?
我不能评论所以我会回答!
当我将您提供的代码插入 Flot 时,它工作正常,图表在左侧显示了完整的条形图,我在这里创建了一个快速 Fiddle:http://fiddle.jshell.net/6xpLey6e/1/ 和使用 IE 和 Chrome.
检查[将barwidth改为barWidth: 24 * 60 * 60 * 1000,for full width bars]
一定有其他原因在起作用。