Antv/G2 自定义折线图线条样式及tootip提示信息样式

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>自定义折线图线条样式及tootip提示信息样式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/lib/antv/g2/4.2.8/dist/g2.min.js">script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.11.1/dist/data-set.js">script>

    <script>
        const data = [
        { city: 'London', month: 'Jan', trate: 18.9 },
        { city: 'London', month: 'Feb', trate: 28.8 },
        { city: 'London', month: 'Mar', trate: 39.3 },
        { city: 'London', month: 'Apr', trate: 81.4 },
        { city: 'London', month: 'May', trate: 47.1 },
        { city: 'London', month: 'Jun', trate: 20.3 },
        { city: 'London', month: 'Jul', trate: 24.7 },
        { city: 'London', month: 'Aug', trate: 35.6 },
        { city: 'Berlin', month: 'Jan', trate: 12.4 },
        { city: 'Berlin', month: 'Feb', trate: 23.2 },
        { city: 'Berlin', month: 'Mar', trate: 34.5 },
        { city: 'Berlin', month: 'Apr', trate: 99.7 },
        { city: 'Berlin', month: 'May', trate: 52.6 },
        { city: 'Berlin', month: 'Jun', trate: 35.5 },
        { city: 'Berlin', month: 'Jul', trate: 37.4 },
        { city: 'Berlin', month: 'Aug', trate: 42.4 },
        ]   
        // 设置图表　　
        const chart = new G2.Chart({
            　　container: 'chartcontainer',
            autoFit: true,//图表是否自适应容器宽高，默认为 false
            　　height: 500,
            padding: [100, 100, 50, 100],//图表内边距,依次为:上，右，下，左
            pixelRatio:window.devicePixelRatio,//设置设备像素比，默认取浏览器的值 window.devicePixelRatio
            renderer:"canvas",//指定渲染引擎，默认使用 canvas。可选：'canvas' | 'svg'
            // theme:"dark",//配置主题，目前 g2 默认有 dark 主题模式，如需要自定义配置，可以先通过 registerTheme 注册主题，再设置主题 key。
            visible:true,//chart 是否可见，默认为 true，设置为 false 则会隐藏。
        　　});
        　　chart.data(data);
        // 设置提示框信息样式
        　　chart.tooltip({
            　　showCrosshairs: true,
            shared: true,
            crosshairs:{
                line:{
                    style:{
                            stroke:"#AFEEEE",//辅助线颜色
                            lineWidth:1,//辅助线粗细
                        },
                    }
                },
                domStyles:{
                    'g2-tooltip':{
                        background:"rgba(00, 00, 00,0.2)",//背景RGBA形式的值
                        color:"#7B68EE",//文字颜色
                        boxShadow:"0px 0px 5px #000000",//阴影大小 阴影颜色 
                    },
                }
            　　});
        // 设置Y轴
        　　chart.axis('trate', {
            // 设置虚线样式
            grid:{
                line:{
                    type:"line",
                    style:{
                                // fill:'#ff0000',
                                stroke:"#000",//网格线颜色
                                opacity:0.3,//网格线透明度
                                lineDash:[1,3],//虚线
                            }
                        }
                    },
                    　　label: {
                        style:{
                            fill:"#4169E1",///Y轴文字颜色
                            fontFamily: "Microsoft YaHei",///Y轴文字字体
                            fontWeight: 400,///Y轴文字粗细
                            fontSize: 12,///Y轴文字大小
                        },
            　　formatter: function formatter(val) { // 格式化
                　　return val + '°C';
            　　}
        　　}
    　　});
        // 自定义图例
        chart.legend('city',{
            clickable: true,
            position: 'top', // 设置图例的显示位置      
        })
        // 设置图表折线相关属性【折线样式】
        chart.line()
        .color('city', ["#FFA07A","#90EE90","#2611ff","#26aa99"]).shape('smooth')//曲率
        .position('month*trate') // X轴 * Y轴
        .style({ 
            lineWidth: 4 // 折线宽度
        })
        .label("trate", { // 折线上的值标签
            content: (originData) => {
                        return originData["trate"]+"°C";//设置值标签最终显示的内容
                    },
                    style: {
                        fill: "#A0522D",
                        fontFamily: "Microsoft YaHei",
                        fontWeight: 400,
                        fontSize: 16,
                        // fill: "#ffffff",
                    },
                    position:"top",//显示位置
                })       
        chart.render();
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

页面效果：
在这里插入图片描述

相关阅读:
c++中c风格的字符串
 uvm通信
 如何用微信小程序实现远程控制无人售货柜
 47、Docker 安装 ElasticSearch、Kibana、IK分词器
 十万访问量的背后。。。
数据结构与算法（一）数组的相关概念和底层java实现
 基于python的毕业设计电脑硬件配置推荐系统
 阿里十年总结，这份【Spring架构深度解析】已经被各大厂拿来当面试题了
 stack栈、queue队列、list链表容器
 安卓的一些官方测试案例
原文地址：https://blog.csdn.net/HH18700418030/article/details/134463061