F2 支持 GCanvas 么？

morelearn1990 commented 6 years ago

有人说F2支持GCanvas上下文对象的，我试着集成了一下，报错提示 GCanvas not supported yet 。现阶段是不支持 GCanvas 么？

simaQ commented 6 years ago

F2 3.1 版本还没有尝试做支持，但是基本是支持的，只要在创建 chart 的时候传入使用 context 参数传入。

weex 之前有基于 G2-Mobile（F2 的曾用名，3.1 之前把）封装过： https://github.com/weex-plugins/weex-chart

只是我目前还没有这么多时间去做升级（毕竟我是个可视化工程师，这么多平台学不过来... 也是尴尬），如果可以的话，欢迎我们非常欢迎共建 @morelearn1990

morelearn1990 commented 6 years ago

像F2 的支付宝小程序版本一样 mock 一个measureText api 。然后直接把 gcanvasjs 里面 enable 生成的 canvas 对象传给 el 就可以了，但是渲染没有网页流畅,且没有手势交互。估计需要做一些处理

morelearn1990 commented 6 years ago

我再研究一下

cileLV commented 6 years ago

你好，可以详细说一下是如何实现的吗？gcanvas.js中只看到有start(el)会返回一个canvas，我尝试把start()返回的canvas传给el，没能成功绘制图表 var ref = this.$refs.canvas_holder ref = GCanvas.start(ref)

const chart = new F2.Chart({ el: ref }) @morelearn1990

morelearn1990 commented 6 years ago

import { enable, WeexBridge, Image as GImage } from "gcanvas.js";

var ref = this.$refs.canvas_holder let gcanvasRef = enable(ref, {bridge: WeexBridge }); let chart = new F2.Chart({ el: gcanvasRef });

cileLV commented 6 years ago

请问你的"gcanvas.js"文件是从哪儿来的，我这边是根据https://github.com/alibaba/GCanvas#examples 这个例子，将GCanvas/GCanvas/js/src/的所有文件拷到项目下，使用其中的index.js文件 import { enable, WeexBridge, Image as GImage } from '../src/index.js' 其他都跟你给的示例代码一样，还是不能渲染图表， new F2.Chart({ el: gcanvasRef }); 这块代码报错，查看f2.js源码，是 _initCanvas() 中new Canvas()抛异常

morelearn1990 commented 6 years ago

https://jsplayground.taobao.org/album?name=Graphics 这儿有示例."gcanvas.js"使用 npm install gcanvas.js

morelearn1990 commented 6 years ago

基于之前的一些讨论，做了个简单的封装，水平有限，有些问题还没有解决，而且这只能复制粘贴使用。 https://github.com/morelearn1990/F2-gcanvas-wrapper

simaQ commented 6 years ago

恩，好的，这个问题我会跟进的

lyle-luan commented 5 years ago

在 weex 中集成 F2仍然是GCanvas not supported yet

安装 gcanvas：npm install gcanvas.js 安装 f2：npm install @antv/f2

代码：

<template>
  <div class="wrapper">
    <text>it is ok</text>
    <gcanvas ref="canvas_holder" style="width:750px;height:400px;"></gcanvas>
  </div>
</template>
<script>
import F2 from '@antv/f2'
import {enable, WeexBridge} from 'gcanvas.js'

export default {
  name: 'App',
  data () {
    return {
      data: [{
        time: '2016-08-08 00:00:00',
        tem: 10
      }, {
        time: '2016-08-08 00:10:00',
        tem: 22
      }]
    }
  },
  methods: {
    renderNativeF2 () {
      let ref = this.$refs.canvas_holder
      let gcanvasRef = enable(ref, {bridge: WeexBridge})
      const chart = new F2.Chart({
        el: gcanvasRef,
        width:750,
        height:400
      })

      chart.source(this.data)
      chart.interval().position('time*tem').color('genre')
      chart.render()
    }
  },
  mounted: function () {
    this.renderNativeF2()
  }
}
</script>

lyle-luan commented 5 years ago

or0fun/weex-gcanvas 移植了这个库的代码，现在能显示出来图表。沿着这个路线按照我们的需求定制化图表，看有没有问题。

lyle-luan commented 5 years ago

参考这篇文章和or0fun/weex-gcanvas基本是一样的。参照两位大神的做法，可以成功画出图形，但是在iOS 中要使用 0.18.* 的 WeexSDK，不然图表分辨率会不正常。我使用的0.18.0.3。完美。

LiXinLeLe commented 4 years ago

or0fun/weex-gcanvas 移植了这个库的代码，现在能显示出来图表。沿着这个路线按照我们的需求定制化图表，看有没有问题。

你好, 请问一下你的 f2 是什么版本的 , 我按这个试发现 F2.Util.measureText 这个是只读属性, 修改不了.. @lyle-luan

KaelInvoker commented 1 year ago

您好，参考上面的方案支持f2最新版本么? f2最新版本已经4.0了

antvis / F2

F2 支持 GCanvas 么？ #167