⑴GPlot是一款非常专业且优秀的通用统计图表库,该图表库最大的特点就是简单易用,除此之外还具备了一定的扩展能力以及组合能力,基于图形语法理论搭建而成,软件提供了良好的视觉效果和交互体验,配置项优化精简,仅需几行代码即可轻松生成完整的图表,同时软件还提供了响应式网站图表,能够有效确保图表在任何显示尺寸任何数据状态下的可读性,有了这款软件您就再也不用担心不能制作出标准精美的统计图表了,适用于任何类型的用户,需要的话就赶快下载试试吧!
⑵可自定义设置图表宽度图表高度图表渲染方式
⑶图形在 x 方向对应的数据字段名,一般是横向的坐标轴对应的字段。比如:要看不同班级的人数情况,那么班级字段就是对应的 xField
⑷图形在 y 方向对应的数据字段名,一般是纵向的坐标轴对应的字段。比如:要看不同班级的人数情况,那么人数字段就是对应的 yField。
⑸分组字段。用于同时看一个维度中不同情况的指标需求。比如:我们看不同大区最近 天的销售额趋势情况,那么这里的大区字段就是
⑹seriesField。
⑺全局化配置图表数据元信息,以字段为单位进行配置,来定义数据的类型和展示方式。在 meta 上的配置将同时影响所有组件的文本信息。
⑻折线图形样式。可以直接传入 ShapeStyle 结构,也可以使用回调函数的方式,针对不同的数据,来返回不同的样式
⑼可设置 tooltip 内容框是否跟随鼠标移动
⑽也可设置tooltip 是否允许鼠标滑入。
⑾配置项优化精简,仅需几行代码轻松生成图表
⑿即使你是可视化或设计小白,也能制作优雅标准的统计图表
⒀保证图表在任何显示尺寸任何数据状态下的可读性
⒁来这里尝试一下我们正在开发中的高级图表功能
⒂既可以通过将脚本下载到本地也可以直接引入在线资源。
⒃通过 npm 安装
⒄我们提供了 GPlot 的 npm 包,通过下面的命令即可完成安装:
⒅成功安装完成之后,即可使用 import 或 require 进行引用:
⒆在 GPlot 引入页面后,我们就已经做好了创建第一个图表的准备了。下面以一个基础折线图为例开始我们第一个图表的创建。
⒇step: 创建图表容器
⒈step: 引入数据。GPlot 的数据源格式是 JSON 数组,数组的每个元素是一个标准 JSON 对象,部分图表除外。
⒉step: 创建并渲染图表
⒊图表元素的视觉样式采用默认主题的样式,还没有经过特别定制,图表主体中的文本元素也没有进行格式化,我们可以根据需求对图表进行各种个性化设置,更多多配置请参考图表
⒋通过上面由浅入深的教程,你应该已经基本了解 GPlot 的使用方法了,不过这远远不是终点,GPlot
⒌还有很多有趣的配置和特性等待你的尝试和探索。更多基础功能请参考各图表配置项。
⒍所有图表的创建,都是一样的,从 GPlot 中引入对应的 Plot class,然后创建实例,构造函数有两个参数:
⒎创建好的图表实例,都具有两个公开属性:
⒏container HTMLElement: 图表渲染的 DOM 容器。
⒐options PlotOptions: 图表当前的所有全量配置项 options,是有用户传入,以及图表内置的默认配置项合并之后结果。
⒑对于 API,分别罗列图表实例的所有 API 方法。如果按照功能分类,主要可以分成为:生命周期函数事件状态量 等 API
⒒GPlot 使用 G
⒓作为绘图引擎,一些图形的样式配置,如折线图的lineStyle,柱状图的columnStyle等,还有部分组件的样式配置,如label.style,
⒔axis.line.style等,都是直接透传 G 的绘图属性。
⒕为了方便用户使用,在这里对 GPlot 常用的绘图属性进行简单的介绍:
⒖示例代码,使用全量图形样式配置 Column (基础柱状图) 的柱形图形样式 ColumnStyle:
⒗示例代码,使用全量图形样式配置 Line (基础折线图) 的折线图形样式 LineStyle:
⒘示例代码,以 Liquid (水波图) 的 statistic.style 配置为例:
⒙Documentation Changes
⒚GPlot Calendar: 补充组合图表 demo & 增加一个插件图表 (#) (db)
⒛scrollbar: 补充滚动条滑块的高亮色文档 (#) (bfded)
①label-line: 类型定义补全 (#) (dfab)
②tooltip: 更新 tooltip 关于 marker 的文档 (#) (ec)
③New Features
④liquid: 水波图支持跟随主题色 & 水波图支持 outline 配置样式 & 文档以及 demo 优化 (#)
⑤scatter: 散点图支持 color 和 shape 同时映射图例字段 & 添加单测 (#) (cbe)
⑥area: 面积图支持 startOnZero (#) (cdea)
⑦conversion-tag: 转化分析 tag 添加 elements 信息,方便业务上使用 (#) (a)
⑧Bug Fixes
⑨dual-axes: 双轴图 theme 主题设置 (#) (bfd)
⑩radial-bar: 修复玉钰图存在非法数据崩溃问题 (#) (#) (fbd)