let data = [{ // 定义一些数据
date: '2018-05-01',
steps: 100
},
{
date: '2018-05-02',
steps: 320
},
{
date: '2018-05-03',
steps: 130
},
{
date: '2018-05-04',
steps: 840
},
{
date: '2018-05-05',
steps: 450
},
{
date: '2018-05-06',
steps: 160
},
{
date: '2018-05-07',
steps: 470
},
{
date: '2018-05-08',
steps: 780
},
{
date: '2018-05-09',
steps: 990
}
]
var originDates = [ '2018-05-01', '2018-05-02', '2018-05-03', '2018-05-04', '2018-05-05']; // 这里是柱状图显示的数据的长度，多余的通过滑动来显示，
var chart = new F2.Chart({
id: 'mountNode',
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
date: {
type: 'cat',
tickCount: 5,
values: originDates
},
steps: {
tickCount: 5
}
});
chart.axis('date', { // 横坐标样式
tickLine: { // 横坐标名字上面那个突出的小线段
length: 4,
stroke: '#cacaca'
},
label: {
fill: '#cacaca' // 字体颜色
},
line: {
top: true
}
});
chart.axis('steps', {
position: 'left', // 纵坐标位置
label: function label(text) {
return {
text: text,
fill: '#cacaca'
};
},
grid: {
stroke: '#d1d1d1'
}
});
chart.legend(false) // 是否显示图例
chart.interval().position('date*steps').style({ // style:柱状图样式
radius: [2, 2, 0, 0]
}).size(30).color('date',['#257dd7','#d66b2a']) // size: 每个柱状图的宽度，color:柱状图的颜色
// 定义进度条
chart.scrollBar({ // 滑动条 ：可以加if判断，数据少就不用显示
mode: 'x',
xStyle: {
backgroundColor: '#e8e8e8',
fillerColor: '#808080',
offsetY: -2
}
});
chart.interaction('pan');
chart.render();
