link

  • 移动端数据图表组件调研
    • chart.js
      • 文档: chartjs
      • github 48000+ star
      • 类型:6 种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区)
      • 特性:颜色,字体,边框和它们的尺寸都可以定制,图表可以动画的形式加载,非常炫
      • 兼容:支持 canvas 的所有现代浏览器和大部分手机浏览器,自动针对 retina 屏幕做缩放
      • 其他:图表如果使用动画效果,在 PC 端流畅,但是在移动端效果产生抖动延迟现象;如果不使用动画效果在移动端则正常显示
      • 分析:移动端表现佳,课通过自适应宽度来使得图表宽度与设备屏幕适配。适当缩小图表,合理展示数据。兼容能力强,API 使用不复杂。
    • highcharts
      • 文档: hcharts
      • 技术: 基于 SVG
      • 类型:直线图、曲线图、面积图、柱状图、饼图、散点图等多达 18 种不同类型的图表
      • 其他:支持移动端,根据页面宽度定义图表宽度。需要商业授权
    • F2
      • 文档: F2

比较当前社区图表库下来, 在移动端表现可以的有 chart.js(移动端展现 ok, 貌似有动画的场景表现欠佳)、hightcharts(需商用授权)、F2(图形语法上手成本高), 因为现在业务是基于 f2(https://f2.antv.vision/zh/examples/basic) 开发的, 因此现在的思路是封装 F2 为 React 组件, 类似社区的 bizGoblin, https://github.com/ant-design/ant-design-mobile-chart