<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>多折线图双坐标轴</title>
<style>
#chartcontainer {
margin: 50px auto;
text-align: center;
}
</style>
</head>
<body>
<div id="chartcontainer"></div>
<script>
/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body
.clientHeight
</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script>
var data =
[
{
date: '2023/8/1', type: 'london', value: 4623, rate: 0.33},
{
date: '2023/8/1', type: 'tokyo', value: 2208, rate: 0.53},
{
date: '2023/8/1', type: 'paris', value: 182, rate: 0.63},
{
date: '2023/8/2', type: 'london', value: 6145, rate: 0.13},
{
date: '2023/8/2', type: 'tokyo', value: 2016, rate: 0.33},
{
date: '2023/8/2', type: 'paris', value: 257, rate: 0.33},
{
date: '2023/8/3', type: 'london', value: 508, rate: 0.23},
{
date: '2023/8/3', type: 'tokyo', value: 2916, rate: 0.03},
{
date: '2023/8/3', type: 'paris', value: 289, rate: 0.73},
{
date: '2023/8/4', type: 'london', value: 6268, rate: 0.63},
{
date: '2023/8/4', type: 'tokyo', value: 4512, rate: 0.63},
{
date: '2023/8/4', type: 'paris', value: 428, rate: 0.53},
{
date: '2023/8/5', type: 'london', value: 6411, rate: 0.33},
{
date: '2023/8/5', type: 'tokyo', value: 8281, rate: 0.03},
{
date: '2023/8/5', type: 'paris', value: 619, rate: 0.13},
{
date: '2023/8/6', type: 'london', value: 1890, rate: 0.43},
{
date: '2023/8/6', type: 'tokyo', value: 2008, rate: 0.53},
{
date: '2023/8/6', type: 'paris', value: 87, rate: 0.73},
{
date: '2023/8/7', type: 'london', value: 4251, rate: 0.03},
{
date: '2023/8/7', type: 'tokyo', value: 1963, rate: 0.13},
{
date: '2023/8/7', type: 'paris', value: 706, rate: 0.83}
];
var chart = new G2.Chart({
container: 'chartcontainer',
width: 800,
height: 500,
});
chart.source(data);
chart.tooltip({
// 提示信息
follow: true,
crosshairs: 'y',
showTitle: true,
showMarkers: false,
});
chart.source(data, {
'date': {
// 显示的条数
tickCount: 15
}
});
chart.axis('date', {
// 坐标轴
label: {
textStyle: {
fill: '#aaaaaa'
}
}
});
chart.axis('value', {
label: {
textStyle: {
fill: '#aaaaaa'
},
formatter: function formatter(text) {
// 格式化参数值
return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}
}
});
// 自定义图例
chart.legend('type',{
clickable: true,
position: 'top', // 设置图例的显示位置
})
// 左侧坐标轴
chart.line().position('date*value').color('type')
chart.point().position('date*value').color('type').size(4).shape('circle').style({
stroke: '#fff',
lineWidth: 1
})
// 右侧坐标轴
chart.line().position('date*rate').color('type')
chart.point().position('date*rate').color('type').size(4).shape('circle').style({
stroke: '#fff',
lineWidth: 1
})
chart.render();
</script>
</body>
</html>
页面效果：
