antv图例出现分页_legend-尾部跟随图例

源码复制成功复制失败全屏 复制 运行

legend-尾部跟随图例

$.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/fertility2.json', function(data) {

var dv = new DataSet.View().source(data).transform({

type: 'aggregate',

fields: ['value', 'value'],

operations: ['min', 'max'],

as: ['min', 'max'],

groupBy: ['country'],

orderBy: ['year']

}).rows;

data = new DataSet.View().source(data).transform({

type: 'sort-by',

field: 'year',

orderBy: 'ASC'

});

var valueMap = {};

var chart = new G2.Chart({

container: 'mountNode',

forceFit: true,

height: window.innerHeight,

padding: [10, 200, 50, 50]

});

chart.source(data);

chart.legend({

attachLast: true

});

chart.line().position('year*value').color('country').size('country', function(country) {

if (country === 'China') return 5;

return 2;

}).label('country*value*year', function(country, value, year) {

var result = null;

for (var i = 0; i < dv.length; i++) {

if (dv[i].country === country) {

if (dv[i].min === value && !valueMap[country + 'min']) {

valueMap[country + 'min'] = year;

result = value;

break;

}

if (dv[i].max === value && !valueMap[country + 'max']) {

valueMap[country + 'max'] = year;

result = value;

break;

}

}

}

return result;

}, {

labelLine: false,

offset: 10,

textStyle: {

stroke: '#fff',

lineWidth: 2

}

}).style({

lineCap: 'round'

});

chart.point().position('year*value').color('country').style({

lineWidth: 2

}).size('country*value*year', function(country, value, year) {

if (valueMap[country + 'min'] === year || valueMap[country + 'max'] === year) {

return 3;

}

return 0;

});

chart.render();

});

legend-尾部跟随图例

$.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/fertility2.json', function(data) {

var dv = new DataSet.View().source(data).transform({

type: 'aggregate',

fields: ['value', 'value'],

operations: ['min', 'max'],

as: ['min', 'max'],

groupBy: ['country'],

orderBy: ['year']

}).rows;

data = new DataSet.View().source(data).transform({

type: 'sort-by',

field: 'year',

orderBy: 'ASC'

});

var valueMap = {};

var chart = new G2.Chart({

container: 'mountNode',

forceFit: true,

height: window.innerHeight,

padding: [10, 200, 50, 50]

});

chart.source(data);

chart.legend({

attachLast: true

});

chart.line().position('year*value').color('country').size('country', function(country) {

if (country === 'China') return 5;

return 2;

}).label('country*value*year', function(country, value, year) {

var result = null;

for (var i = 0; i < dv.length; i++) {

if (dv[i].country === country) {

if (dv[i].min === value && !valueMap[country + 'min']) {

valueMap[country + 'min'] = year;

result = value;

break;

}

if (dv[i].max === value && !valueMap[country + 'max']) {

valueMap[country + 'max'] = year;

result = value;

break;

}

}

}

return result;

}, {

labelLine: false,

offset: 10,

textStyle: {

stroke: '#fff',

lineWidth: 2

}

}).style({

lineCap: 'round'

});

chart.point().position('year*value').color('country').style({

lineWidth: 2

}).size('country*value*year', function(country, value, year) {

if (valueMap[country + 'min'] === year || valueMap[country + 'max'] === year) {

return 3;

}

return 0;

});

chart.render();

});