Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
name: 'HU',
country: 'Hungary'
}, {
x: 63.4,
y: 51.8,
z: 15.4,
name: 'PT',
country: 'Portugal'
}, {
x: 64,
y: 82.9,
z: 31.3,
name: 'NZ',
country: 'New Zealand'
}];
const chart = new F2.Chart({
id: 'container',
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
x: {
alias: 'Daily fat intake', // 定义别名
tickInterval: 5, // 自定义刻度间距
nice: false, // 不对最大最小值优化
max: 96, // 自定义最大值
min: 62 // 自定义最小是
},
y: {
alias: 'Daily sugar intake',
tickInterval: 50,
nice: false,
max: 165,
月份: 'May.',
月均降雨量: 52.6
}, {
name: 'Berlin',
月份: 'Jun.',
月均降雨量: 35.5
}, {
name: 'Berlin',
月份: 'Jul.',
月均降雨量: 37.4
}, {
name: 'Berlin',
月份: 'Aug.',
月均降雨量: 42.4
}];
const chart = new F2.Chart({
id: 'container',
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
月均降雨量: {
tickCount: 5
}
});
chart.tooltip({
custom: true, // 自定义 tooltip 内容框
onChange: function onChange(obj) {
const legend = chart.get('legendController').legends.top[0];
const tooltipItems = obj.items;
const legendItems = legend.items;
const map = {};
legendItems.forEach(function(item) {
country: 'Asia',
year: '2050',
value: 5268,
percent: 0.8934871099050203
}, {
country: 'Europe',
year: '2100',
value: 828,
percent: 0.10227272727272728
}, {
country: 'Asia',
year: '2100',
value: 7268,
percent: 0.8977272727272727
}];
const chart = new F2.Chart({
id: 'container',
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
percent: {
min: 0,
formatter: function formatter(val) {
return (val * 100).toFixed(0) + '%';
}
}
});
chart.coord({
transposed: true
});
chart.tooltip({
custom: true, // 自定义 tooltip 内容框
user: '用户 A',
score: 70
}, {
item: 'Technology',
user: '用户 B',
score: 40
}, {
item: 'Support',
user: '用户 A',
score: 60
}, {
item: 'Support',
user: '用户 B',
score: 40
}];
const chart = new F2.Chart({
id: 'container',
pixelRatio: window.devicePixelRatio
});
chart.coord('polar');
chart.source(data, {
score: {
min: 0,
max: 120,
nice: false,
tickCount: 4
}
});
chart.tooltip({
custom: true, // 自定义 tooltip 内容框
onChange: function onChange(obj) {
import F2 from '@antv/f2';
// F2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }
];
// Step 1: 创建 Chart 对象
const chart = new F2.Chart({
id: 'container',
pixelRatio: window.devicePixelRatio // 指定分辨率
});
// Step 2: 载入数据源
chart.source(data);
// Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
chart.interval()
.position('genre*sold')
.color('genre');
// Step 4: 渲染图表
chart.render();
function CommonChart(config) {
this.viewInstance = {};
this.config = _Commom.Util.deepClone(config);
this.checkChartConfig(this.config);
this.chartInstance = new F2.Chart(this.config.chart);
}
tag: 0
}, {
date: '2017-06-28',
value: 9.3,
tag: 0
}, {
date: '2017-06-29',
value: 8.5,
tag: 0
}, {
date: '2017-06-30',
value: 7.3,
tag: 0
}];
const chart = new F2.Chart({
id: 'container',
pixelRatio: window.devicePixelRatio,
padding: [ 45, 'auto', 'auto' ]
});
chart.source(data, {
value: {
tickCount: 5,
min: 0,
formatter: function formatter(val) {
return val.toFixed(2) + '%';
}
},
date: {
type: 'timeCat',
range: [ 0, 1 ],
}, {
date: '2018-05-19',
steps: 3861
}, {
date: '2018-05-20',
steps: 8
}, {
date: '2018-05-21',
steps: 24365
}, {
date: '2018-05-22',
steps: 14271
}];
const chart = new F2.Chart({
id: 'container',
pixelRatio: window.devicePixelRatio,
padding: [ 20, 30, 'auto', 'auto' ]
});
chart.source(data, {
date: {
type: 'timeCat',
range: [ 0, 1 ],
mask: 'MM-D'
},
steps: {
ticks: [ 10000 ],
formatter: function formatter(val) {
return val === 10000 ? '1W' : 0;
}
}
.then(data => {
const chart = new F2.Chart({
id: 'container',
pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.scale('year', {
tickCount: 5,
range: [ 0, 1 ]
});
chart.axis('year', {
label: function label(text, index, total) {
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
} else if (index === total - 1) {
textCfg.textAlign = 'right';
}
city: 'Austin',
date: '2011-11-01'
}, {
value: 47.2,
city: 'New York',
date: '2011-11-02'
}, {
value: 64.6,
city: 'Alaska',
date: '2011-11-02'
}, {
value: 71,
city: 'Austin',
date: '2011-11-02'
}];
const chart = new F2.Chart({
id: 'container',
pixelRatio: window.devicePixelRatio
});
chart.source(data, {
date: {
range: [ 0, 1 ],
type: 'timeCat',
mask: 'MM-DD'
},
value: {
max: 300,
tickCount: 4
}
});
chart.tooltip({