antv-f2图表x轴显示不全的问题图表显示坐标轴单位

念念ovo

已于 2022-02-10 11:08:39 修改

阅读量3.2k

点赞数

分类专栏： ant-v vue 文章标签： css html

于 2021-03-04 09:18:23 首次发布

本文链接：https://blog.csdn.net/weixin_52827704/article/details/114358059

版权

vue 同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

ant-v

2 篇文章 0 订阅

订阅专栏

如图，x轴单位被遮盖，显示不全

在这里插入图片描述
x轴“日期”显示不全

解决方法：加上padding

var chart = new this.F2.Chart({
        id: 'readingTimeChart',
        pixelRatio: window.devicePixelRatio,
        padding: '30',
      })

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

在图表x轴y轴显示坐标轴单位，如上图，分钟和日期

// 在图表初始化方法里面 
readingTimeChart() {
      var data = this.readingTimeChartData
      var chart = new this.F2.Chart({
        id: 'readingTimeChart',
        pixelRatio: window.devicePixelRatio,
        padding: '40',
      })
      ......
      // 
      // 省略一下其他的一些方法 数据什么的 
      //
	chart.guide().text({
        position: ['min', 'min'], // x 轴最小值, y 轴最大值
        content: '分钟',    // -----------------------------------y轴坐标单位
        style: { 
          textAlign: 'start',
          textBaseline: 'bottom',
          fill: '#777',
          fontSize: '10',
        },
        offsetY: 20,
        offsetX: -25, // 可以通过 padding 值配合来保证显示位置
      })
      chart.guide().text({
        position: ['max', 'min'], // x 轴最小值, y 轴最大值
        content: '日期', // -----------------------------------x轴坐标单位
        style: {
          textAlign: 'start',
          textBaseline: 'bottom',
          fill: '#777',
          fontSize: '10',
        },
        offsetY: 18,
        offsetX: 0, // 可以通过 padding 值配合来保证显示位置
      })
   }