【行业资讯】go-charts 1.0 版本发布:支持更多的图表样例及主题

go-charts
go-charts基于go-chart,提供更简单方便的形式生成数据图表,支持与两种方式的输出,支持三种主题, 以及。
在前端开发中得到众多开发者的认可,因此提供了兼容的配置参数,简单快捷的生成相似的图表(或),方便插入至Email或分享使用。下面为常用的图表截图(主题为light与grafana):
图片
支持图表类型
暂仅支持三种的图表类型:, 以及
示例
下面的示例为两种方式的参数配置:golang的参数配置、echarts的JSON配置,输出相同的折线图。更多的示例参考:目录
ECharts参数说明
名称有[]的参数非echarts的原有参数,为的新增参数,可根据实际使用场景添加。
画布类型,支持与,默认为
颜色主题,支持、以及模式,默认为
字体,全局的字体设置
图表的内边距,单位px。支持以下几种模式的设置
设置内边距为5
设置上下的内边距为 5,左右的内边距为 10
分别设置边距
图表的区域,以{"left": Int, "right": Int, "top": Int, "bottom": Int}的形式配置
画布宽度,默认为600
画布高度,默认为400
图表标题,包括标题内容、高度、颜色等
标题文本,支持以的形式换行
副标题文本,支持以的形式换行
标题与容器左侧的距离,可设置为, , , 以及 这样的具体数值
标题与容器顶部的距离,暂仅支持具体数值,如
标题文字颜色
标题文字字体大小
标题文字的字体系列,需要注意此配置是会影响整个图表的字体
直角坐标系grid中的x轴,由于go-charts仅支持单一个x轴,因此若参数为数组多个x轴,只使用第一个配置
坐标轴两边留白策略,仅支持三种设置方式, 或者。或时则数据点展示在两个刻度中间
坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
x轴的展示文案,暂只支持字符串数组,如["Mon", "Tue"],其数量需要与展示点一致
直角坐标系grid中的y轴,最多支持两个y轴
坐标轴刻度最小值,若不设置则自动计算
坐标轴刻度最大值,若不设置则自动计算
刻度标签的内容格式器,如
坐标轴颜色
图表中不同系列的标记
图例是否显示,如果不需要展示需要设置为
图例的数据数组,为字符串数组,如["Email", "Video Ads"]
图例标记和文本的对齐,可设置为或者,默认为标记靠左
legend的padding,配置方式与图表的一致
legend离容器左侧的距离,其值可以为具体的像素值(20)或百分比(20%)、或者
legend离容器顶部的距离,暂仅支持数值形式
图表的数据项列表
常用形式,数组数据为浮点数组,如[1.1, 2,3, 5.2]
pie图表或bar图表中指定样式使用,如[{"value": 1048, "name": "Search Engine"},{"value": 735,"name": "Direct"}]
图表的名称,与对应,两者只只设置其一
图表的展示类型,暂支持, 以及,需要注意只能单独使用
饼图的半径值,如,默认为
该数据项使用的y轴,默认为0,对yAxis的配置对应
是否显示文本标签(默认为对应的值)
距离图形元素的距离
文本标签的颜色
该数据项展示时使用的颜色
图表的标注配置
标注的大小,默认为30
标注类型,仅支持数组形式,其类型只支持与,如:`[{"type": "max"}, {"type": "min"}]
图表的标线配置
标线类型,仅支持数组形式,其类型只支持、以及,如:`[{"type": "max"}, {"type": "min"}, {"type": "average"}]
数据项对应的数据数组,支持以下形式的数据:
嵌套的子图表参数列表,图表支持嵌套的形式=
性能
简单的图表生成PNG在20ms左右,而SVG的性能则更快,性能上比起使用加载图表展示页面再截图生成的方式大幅度提升,满足简单的图表生成需求。
中文字符
默认使用的字符为为英文字体库,因此如果需要显示中文字符需要增加中文字体库,函数可添加对应的字体库,成功添加之后则指定即可。在浏览器中使用时,如果指定的不支持中文字符,展示的中文并不会乱码,但是会导致在计算字符宽度等错误。