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();
