antv/g2中的柱状图一些配置

g2图表有些api的属性不全,文档看着有些费劲,所以整理了一些项目中用到的柱状图的简单配置项

图标初始化

const chart = new Chart({
   
        container: this.rootRef.current, //图标容器使用react的createRef()指定
        autoFit: true, //图标的宽度自适应
        height: isYesNoLabel ? 500 : chartH,
      });
      chart.data(data);  //导入数据data:[{type:srting,value:number},{},{}]
      const labelWidth = (chart.width/data.length)
      //g2的x轴labe超长时自适应会有些问题,所以自己写了个判断x轴坐标label超长旋转方法
      const isRotateOrNot = data.some(item=>getPixLength(item.type)>labelWidth)
      //根据是否旋转label来设置图表的padding值,如果设为auto的话,xTitle会被挤出canvas画布,chart.padding设置可行,但是chart.height或者.width都不行
      chart.padding = isRotateOrNot ? [20, 50, 150, 100]: [30, 50, 50, 100]

柱体颜色、宽度

chart.legend(false);关闭图例
      const isSettingSizeInstance = chart
        .interval()  //设置柱状图
        .position('type*value') //指定展示的数据
        .

你可能感兴趣的:(数据可视化,javascript,数据可视化,html)