Antv F2双柱状图和折线图的混合写法

最新推荐文章于 2025-06-23 09:56:04 发布

super美少女战士

最新推荐文章于 2025-06-23 09:56:04 发布

阅读量9.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Antv F2 文章标签： Antv F2混合图写法

本文链接：https://blog.youkuaiyun.com/X_W123/article/details/99584069

这篇博客详细介绍了如何使用 Antv F2 库创建双柱状图和折线图的混合图表。作者在学习F2的过程中发现相关资料稀缺，通过实践摸索出混合图表的写法，并分享了关键点——数据需在同一名下保持一致，这对于理解双柱图的实现至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@Antv F2双柱状图和折线图的混合写法
第一次写博客，原因很简单，来公司后要学习F2,除了官方api发现网上对这个介绍很少，刚好今天遇到双柱图和折线图写法，捣鼓了好久才明白，打算记录在博客中。

import F2 from '@antv/wx-f2'; 
let chart = null;
// 数值显示在柱状图上方得自定义图形，具体参加官方api
var Shape = F2.Shape;
var Util = F2.Util;
// 自定义图形：interval指定义的类型可以是三角形，此处是柱状图
Shape.registerShape('interval', 'text', {
  // draw：是个方法，里面俩参数固定
  draw: function draw(cfg, container) {
    // 通过此方法获取绘制图形的关键点
    var points = this.parsePoints(cfg.points);
    // Util.mix方法：浅拷贝
    var style = Util.mix({
      fill: cfg.color,
      z: true // 需要闭合
    }, cfg.style);
    // rect:interval提供的内置shape类型具体参考 https://www.yuque.com/antv/f2/geometry
    var intervalShape = container.addShape('rect', {
      attrs: Util.mix({
        x: points[1].x,
        y: points[1].y,
        width: points[2].x - points[1].x,
        height: points[0].y - points[1].y
      }, style)
    });