安装
浏览器引入
可以通过 <script> 标签引入在线资源或者本地脚本：
<!-- 引入在线资源 -->
<script src="https://unpkg.com/@antv/data-set"></script>
<!-- 引入本地脚本 -->
<script src="./data-set.js"></script>
这样，在后续脚本中就可以得到全局变量 DataSet：
<script src="https://unpkg.com/@antv/data-set"></script>
<script>
const dv = new DataSet.DataView();
</script>
命令行安装
npm install @antv/data-set --save
或者
yarn add @antv/data-set --save
<!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://unpkg.com/@antv/data-set"></script>
<script>
// 在一行中保存多个城市的数据，需要将数据转换成
// {month: 'Jan', city: 'Tokyo', temperature: 3.9}
var data = [
{
month: 'Jan', city: 'Tokyo', temperature: 7 },
{
month: 'Jan', city: 'London', temperature: 3.9 },
{
month: 'Feb', city: 'Tokyo', temperature: 6.9 },
{
month: 'Feb', city: 'London', temperature: 4.2 },
{
month: 'Mar', city: 'Tokyo', temperature: 9.5 },
{
month: 'Mar', city: 'London', temperature: 5.7 },
{
month: 'Apr', city: 'Tokyo', temperature: 14.5 },
{
month: 'Apr', city: 'London', temperature: 8.5 },
{
month: 'May', city: 'Tokyo', temperature: 18.4 },
{
month: 'May', city: 'London', temperature: 11.9 },
{
month: 'Jun', city: 'Tokyo', temperature: 21.5 },
{
month: 'Jun', city: 'London', temperature: 15.2 },
{
month: 'Jul', city: 'Tokyo', temperature: 25.2 },
{
month: 'Jul', city: 'London', temperature: 17 },
{
month: 'Aug', city: 'Tokyo', temperature: 26.5 },
{
month: 'Aug', city: 'London', temperature: 16.6 },
{
month: 'Sep', city: 'Tokyo', temperature: 23.3 },
{
month: 'Sep', city: 'London', temperature: 14.2 },
{
month: 'Oct', city: 'Tokyo', temperature: 18.3 },
{
month: 'Oct', city: 'London', temperature: 10.3 },
{
month: 'Nov', city: 'Tokyo', temperature: 13.9 },
{
month: 'Nov', city: 'London', temperature: 6.6 },
{
month: 'Dec', city: 'Tokyo', temperature: 9.6 },
{
month: 'Dec', city: 'London', temperature: 4.8 },
]
var ds = new DataSet(); // 创建DataSet 对象
var dv = ds.createView().source(data);// 创建数据实例
// fold 方式完成了行列转换，如果不想使用 DataSet 直接手工转换数据即可
dv.transform(
{
type: 'sort-by',
fields: ['temperature'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
order: 'DESC', // 默认为 ASC，DESC 则为逆序
});
console.log('dv',dv.rows)
var chart = new G2.Chart({
container: 'chartcontainer',
forceFit: true,
height: 500
});
chart.source(dv, {
month: {
range: [0, 1]
}
});
chart.tooltip({
crosshairs: {
type: 'line'
}
});
chart.axis('temperature', {
label: {
formatter: function formatter(val) {
// 格式化
return val + '°C';
}
}
});
// 自定义图例
chart.legend('city',{
clickable: true,
position: 'top', // 设置图例的显示位置
})
chart.line().position('month*temperature').color('city').shape('smooth');
chart.point().position('month*temperature').color('city').size(4).shape('circle').style({
stroke: '#fff',
lineWidth: 1
});
chart.render();
</script>
</body>
</html>
页面效果：
