配置图表内边距：
用于调整图例在上方时，会与图表重叠的情况
const chart = new G2.Chart({
container: 'c1',
width: 1000,
height: 500,
padding: [100, 40, 80]//内边距
});
配置X轴两边留白
chart.scale({
day: {
range: [0.05, 0.94] //图表左右的留白
}
});
X轴内容配置
chart.axis('day', {
label: {
rotate: (data.length / 3 > 10) ? -45 : 0,
//x轴日期根据数据量判断是否逆时针旋转一定角度，需设置autoRotate:false逆时针才会生效
autoRotate: false,
offset: 30,//文本偏移量，避免旋转后，文本与x轴重叠
autoHide: false, //是否隐藏部分
autoEllipsis: false,//是否省略
formatter: (text, item, index) => {//文本格式转换
return text.replace(/(\d{4})(\d{2})(\d{2})/, "$2月$3日");
}
},
grid: {//配置网格线
line: {
style: {
lineDash: [0, 0],
lineWidth: 1,
stroke: '#e9e9e9'
}
}
}
});
默认情况下，x轴在数据过多时，会省略掉部分项，顺时针旋转一定角度
配置tooltip
chart.tooltip({shared: true});
自定义tooltip文本内容：
chart.tooltip({
itemTpl: '<li class="g2-tooltip-list-item" data-index={index} style="margin-bottom:4px;">' +
'<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
'{name}：' +
'{value} °C' +
'</li>'
});
20200724 补充：
上面所说“自定义tooltip文本内容”是对所有项都生效的，当需要对某一项做特殊的处理，如下：
// valueStr 参数存放label、tooltip展示文本内容，可带单位、描述之类
const data = [{day: '20200706',city: 'Tokyo',temperature: 26.5,
valueStr: '26.5°C(最高温)'
}, {day: '20200706',city: 'London',temperature: 16.6,
valueStr: '16.6°C'
}];
chart.tooltip({
showCrosshairs: true,
showMarkers: false,
shared: true
});
chart.line().position('day*temperature').color('city')
.shape('line')
.label('valueStr', (valueStr) => {
return {
content: valueStr
};
}).tooltip('city*valueStr', (city, valueStr) => {
return {
name: city,
value: valueStr,
};
});
chart.point().position('day*temperature').color('city')
.shape('circle')
.tooltip('city*valueStr', (city, valueStr) => {
return {
name: city,
value: valueStr,
};
});
更改线条颜色，线条内容标注
let colorArr = ['#f66d6d', '#dbb471'];
chart.line().position('day*temperature')
.color('city', function(city) {//线条颜色
for (let i = 0; i < data.length; i++) {
if (city === data[i].city)
return colorArr[i];
}
})
.shape('smooth')
.label('temperature', (value) => {//内容标注
if (value > 0) {
return {
content: value + ' °C'
};
}
return {
content: value
};
});
chart.point().position('day*temperature')
.color('city', function(city) {
for (let i = 0; i < data.length; i++) {
if (city === data[i].city)
return colorArr[i];
}
})
.shape('circle');
<div id="c1"></div>
<div id="c2"></div>
<script src="g2.min.js"></script>
<script>
function drawchart1(data) {
const chart = new G2.Chart({
container: 'c1',
width: 1000,
height: 500,
padding: [100, 40, 80]//内边距
});
chart.scale({
day: {
range: [0.05, 0.94] //图表左右的留白
},
value: {
nice: true
}
});
chart.data(data);
chart.axis('day', {
label: {
rotate: (data.length / 3 > 10) ? -45 : 0,
autoRotate: false,
offset: 30,
autoHide: false,
autoEllipsis: false
}
});
chart.legend('city', {
title: {//图例标题
text: '城市气温折线图',
style: {
fontSize: 20
}
},
offsetY: 30,//图例垂直方向偏移量
position: 'top'
});
chart.tooltip({
showCrosshairs: true,
showMarkers: false,
shared: true
});
chart.line().position('day*temperature').color('city')
.shape('line')//线条为直线
.label('temperature', (value) => {
if (value > 0) {
return {
content: value + ' °C'
};
}
return {
content: value
};
});
chart.point().position('day*temperature').color('city').shape('circle');
// chart.hide();//隐藏图表
// chart.show();//展示图表
chart.render();
}
function drawchart2(data) {
const chart = new G2.Chart({
container: 'c2',
width: 1000,
height: 500,
padding: [100, 40, 80]
});
chart.scale({
day: {
range: [0.05, 0.94],
},
value: {
nice: true
}
});
chart.data(data.reverse());//数据倒序
chart.axis('day', {
label: {
rotate: -45,
autoRotate: false,
offset: 30,
autoHide: false,
autoEllipsis: false,
formatter: (text, item, index) => {
return text.replace(/(\d{4})(\d{2})(\d{2})/, "$2月$3日");
}
},
grid: {
line: {
style: {
lineDash: [0, 0],
lineWidth: 1,
stroke: '#e9e9e9'
}
}
}
});
chart.legend('city', {
title: {
text: '城市气温折线图',
style: {
fontSize: 20
}
},
offsetY: 30,
position: 'top'
});
chart.tooltip({
showCrosshairs: true,
showMarkers: false,
shared: true,
itemTpl: '<li class="g2-tooltip-list-item" data-index={index} style="margin-bottom:4px;">' +
'<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
'{name}：' +
'{value} °C' +
'</li>'
});
let colorArr = ['#f66d6d', '#dbb471'];
chart.line().position('day*temperature')
.color('city', function(city) {
for (let i = 0; i < data.length; i++) {
if (city === data[i].city)
return colorArr[i];
}
})
.shape('smooth')//线条有弧度
.label('temperature', (value) => {
if (value > 0) {
return {
content: value + ' °C'
};
}
return {
content: value
};
});
chart.point().position('day*temperature')
.color('city', function(city) {
for (let i = 0; i < data.length; i++) {
if (city === data[i].city)
return colorArr[i];
}
})
.shape('circle');
// chart.hide();
// chart.show();
chart.render();
}
const data = [{
day: '20200630',
city: 'Tokyo',
temperature: 7
}, {
day: '20200630',
city: 'London',
temperature: 3.9
}, {
day: '20200631',
city: 'Tokyo',
temperature: 6.9
}, {
day: '20200631',
city: 'London',
temperature: 4.2
}, {
day: '20200701',
city: 'Tokyo',
temperature: 9.5
}, {
day: '20200701',
city: 'London',
temperature: 5.7
}, {
day: '20200702',
city: 'Tokyo',
temperature: 14.5
}, {
day: '20200702',
city: 'London',
temperature: 8.5
}, {
day: '20200703',
city: 'Tokyo',
temperature: 18.4
}, {
day: '20200703',
city: 'London',
temperature: 11.9
}, {
day: '20200704',
city: 'Tokyo',
temperature: 21.5
}, {
day: '20200704',
city: 'London',
temperature: 15.2
}, {
day: '20200705',
city: 'Tokyo',
temperature: 25.2
}, {
day: '20200705',
city: 'London',
temperature: 17
}, {
day: '20200706',
city: 'Tokyo',
temperature: 26.5
}, {
day: '20200706',
city: 'London',
temperature: 16.6
}, {
day: '20200707',
city: 'Tokyo',
temperature: 23.3
}, {
day: '20200707',
city: 'London',
temperature: 14.2
}, {
day: '20200708',
city: 'Tokyo',
temperature: 18.3
}, {
day: '20200708',
city: 'London',
temperature: 10.3
}, {
day: '20200709',
city: 'Tokyo',
temperature: 18.3
}, {
day: '20200709',
city: 'London',
temperature: 10.3
}, {
day: '20200710',
city: 'Tokyo',
temperature: 18.3
}, {
day: '20200710',
city: 'London',
temperature: 10.3
}, {
day: '20200711',
city: 'Tokyo',
temperature: 18.3
}, {
day: '20200711',
city: 'London',
temperature: 10.3
}, {
day: '20200712',
city: 'Tokyo',
temperature: 18.4
}, {
day: '20200712',
city: 'London',
temperature: 11.9
}, {
day: '20200713',
city: 'Tokyo',
temperature: 18.4
}, {
day: '20200713',
city: 'London',
temperature: 11.9
}, {
day: '20200714',
city: 'Tokyo',
temperature: 18.4
}, {
day: '20200714',
city: 'London',
temperature: 11.9
}, {
day: '20200715',
city: 'Tokyo',
temperature: 18.4
}, {
day: '20200715',
city: 'London',
temperature: 11.9
}];
drawchart1(data);
drawchart2(data);
</script>
