美文网首页前端
antv/g2 Tooltip自定义排序,隐藏x、y轴的标题

antv/g2 Tooltip自定义排序,隐藏x、y轴的标题

作者: 余生在此 | 来源:发表于2024-06-10 09:07 被阅读0次

    版本号 "@antv/g2": "^5.1.20",

    HTML代码

     <div id="profitChart" class="profitChart"></div>
    

    Css代码

      .profitChart {
        height: 500px;
      }
    

    JS代码

      import  { Chart } from '@antv/g2';
    
      // console.log(data);
        let data: ProfitItem[] = [
          {
            time: '2024-06-05',
            title: '总收益',
            amount: 10,
          },
          {
            time: '2024-06-05',
            title: '微信广告',
            amount: 1,
          },
          {
            time: '2024-06-05',
            title: '支付宝广告',
            amount: 3,
          },
          {
            time: '2024-06-05',
            title: '设备续费',
            amount: 2,
          },
          {
            time: '2024-06-05',
            title: '安全无忧',
            amount: 4,
          },
          {
            time: '2024-06-06',
            title: '总收益',
            amount: 10,
          },
          {
            time: '2024-06-06',
            title: '微信广告',
            amount: 5,
          },
          {
            time: '2024-06-06',
            title: '支付宝广告',
            amount: 1,
          },
          {
            time: '2024-06-06',
            title: '设备续费',
            amount: 2,
          },
          {
            time: '2024-06-06',
            title: '安全无忧',
            amount: 2,
          },
          {
            time: '2024-06-07',
            title: '总收益',
            amount: 0,
          },
          {
            time: '2024-06-07',
            title: '微信广告',
            amount: 0,
          },
          {
            time: '2024-06-07',
            title: '支付宝广告',
            amount: 0,
          },
          {
            time: '2024-06-07',
            title: '设备续费',
            amount: 0,
          },
          {
            time: '2024-06-07',
            title: '安全无忧',
            amount: 0,
          },
          {
            time: '2024-06-08',
            title: '总收益',
            amount: 0,
          },
          {
            time: '2024-06-08',
            title: '微信广告',
            amount: 0,
          },
          {
            time: '2024-06-08',
            title: '支付宝广告',
            amount: 0,
          },
          {
            time: '2024-06-08',
            title: '设备续费',
            amount: 0,
          },
          {
            time: '2024-06-08',
            title: '安全无忧',
            amount: 0,
          },
          {
            time: '2024-06-09',
            title: '总收益',
            amount: 0,
          },
          {
            time: '2024-06-09',
            title: '微信广告',
            amount: 0,
          },
          {
            time: '2024-06-09',
            title: '支付宝广告',
            amount: 0,
          },
          {
            time: '2024-06-09',
            title: '设备续费',
            amount: 0,
          },
          {
            time: '2024-06-09',
            title: '安全无忧',
            amount: 0,
          },
          {
            time: '2024-06-10',
            title: '总收益',
            amount: 0,
          },
          {
            time: '2024-06-10',
            title: '微信广告',
            amount: 0,
          },
          {
            time: '2024-06-10',
            title: '支付宝广告',
            amount: 0,
          },
          {
            time: '2024-06-10',
            title: '设备续费',
            amount: 0,
          },
          {
            time: '2024-06-10',
            title: '安全无忧',
            amount: 0,
          },
          {
            time: '2024-06-11',
            title: '总收益',
            amount: 0,
          },
          {
            time: '2024-06-11',
            title: '微信广告',
            amount: 0,
          },
          {
            time: '2024-06-11',
            title: '支付宝广告',
            amount: 0,
          },
          {
            time: '2024-06-11',
            title: '设备续费',
            amount: 0,
          },
          {
            time: '2024-06-11',
            title: '安全无忧',
            amount: 0,
          },
        ];
        const chart = new Chart({
          container: 'profitChart',
          autoFit: true,
        });
    
        chart
          .data(data)
          .encode('x', 'time')
          .encode('y', 'amount')
          .encode('color', 'title')
          .scale('x', {
            range: [0, 1],
          })
          .scale('y', {
            nice: true,
          })
          .axis('x', { title: false })
          .axis('y', { title: false, labelFormatter: (d) => d + '元' });
    
        chart.line();
        chart
          .point()
          .encode('shape', 'point')
          .interaction('tooltip', {
            render: (event, { title, items }) => {
              let tooltipArr = ['总收益', '微信广告', '支付宝广告', '设备续费', '安全无忧'];
              // console.log(title, items);
              let titleInfo = items.find((dd) => {
                return dd.name == 'time';
              });
    
              const div = document.createElement('div');
              div.innerHTML = `<h3 style="padding:0;margin:0">${titleInfo.value}</h3>`;
              const ul = document.createElement('ul');
              div.append(ul);
              let liHtml = `${tooltipArr.map((name, i) => {
                let d = items.find((dd) => {
                  return dd.name == name;
                });
                return `<li>
                        <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color: ${d.color};margin-right:5px;"></span>
                        ${d.name}:${d.value}
                      </li>`;
              })}`;
    
              liHtml = liHtml.replaceAll(',', '');
              ul.innerHTML = liHtml;
              return div;
            },
          });
    
        chart.render();
    
    

    效果图

    antv-g2.png

    相关文章

      网友评论

        本文标题:antv/g2 Tooltip自定义排序,隐藏x、y轴的标题

        本文链接:https://www.haomeiwen.com/subject/jdyiqjtx.html