Closed Olaf0509 closed 4 days ago
页面已声明元素 <canvas id="container" height="160px"></canvas>
<canvas id="container" height="160px"></canvas>
https://f2.antv.antgroup.com/zh/examples/area/area/#gradient
/* @jsx jsx / import { jsx, Canvas, Chart, Area, Line, Axis, Tooltip } from '@antv/f2';
const context = document.getElementById('container').getContext('2d');
const data = [ { time: '2016-08-08 00:00:00', tem: 10, }, { time: '2016-08-08 00:10:00', tem: 22, }, { time: '2016-08-08 00:30:00', tem: 16, }, { time: '2016-08-09 00:35:00', tem: 26, }, { time: '2016-08-09 01:00:00', tem: 12, }, { time: '2016-08-09 01:20:00', tem: 26, }, { time: '2016-08-10 01:40:00', tem: 18, }, { time: '2016-08-10 02:00:00', tem: 26, }, { time: '2016-08-10 02:20:00', tem: 12, }, ]; const { props } = (
);
const chart = new Canvas(props); chart.render();
需要安装插件 https://f2.antv.antgroup.com/tutorial/framework/vue
页面已声明元素
<canvas id="container" height="160px"></canvas>
Reproduction link
https://f2.antv.antgroup.com/zh/examples/area/area/#gradient
Steps to reproduce
/* @jsx jsx / import { jsx, Canvas, Chart, Area, Line, Axis, Tooltip } from '@antv/f2';
const context = document.getElementById('container').getContext('2d');
const data = [ { time: '2016-08-08 00:00:00', tem: 10, }, { time: '2016-08-08 00:10:00', tem: 22, }, { time: '2016-08-08 00:30:00', tem: 16, }, { time: '2016-08-09 00:35:00', tem: 26, }, { time: '2016-08-09 01:00:00', tem: 12, }, { time: '2016-08-09 01:20:00', tem: 26, }, { time: '2016-08-10 01:40:00', tem: 18, }, { time: '2016-08-10 02:00:00', tem: 26, }, { time: '2016-08-10 02:20:00', tem: 12, }, ]; const { props } = (
);
const chart = new Canvas(props); chart.render();