Skip to content

ant-mini-program/mini-chart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

mini-chart

小程序图表库

使用方法(line举例)

结构一览

avatar

json引入组件

avatar

axml使用组件

avatar

js传入数据

avatar

line 线图

avatar

API

categories: Array<String>

x坐标列表,等同全部数据的宽度。

series: Array<Object>

线的数据,可以为多条线。如果只有一条线,整体也应该是个数组。

  • data: Array<int> 线的数据,一般等同categories的长度,空缺则线段不连接不绘。
  • type: String 一条线的标识名称,多条时确保不冲突。
  • style: String 线的种类,可以取值dash虚线和smooth曲线,默认直接。
  • color: String 线的颜色。
  • point: Object 是否绘制圆点,可以配置size控制点半径、stroke点颜色、lineWidth点边线宽。

padding: int/Array<int>

图形内边距,同css。以下所有图形均有。

appendPadding: int/Array<int>

图表画布区域四边的预留边距,即我们会在padding的基础上,为四边再加上appendPadding的数值,默认为15

xAxis: Object

x坐标轴的配置。

  • tickCount: int 显示的坐标个数。
  • htAlign: boolean 是否首尾缩进对齐。
  • 更多设置详见F2。

yAxis: Object

y坐标轴的配置,同xAxis

legend: Object

整体图例设置,默认空。

  • position: String 显示位置,可选topbottomleftright
  • offsetX: int 水平偏移。
  • offsetY: int 垂直偏移。
  • 更多设置详见F2。

tooltip: Object

触摸提示设置,默认空。

  • showTitle: boolean 是否展示标题,默认不展示。
  • showCrosshairs: 是否显示辅助线,点图、路径图、线图、面积图默认展示。
  • offsetX: int 水平偏移。
  • offsetY: int 垂直偏移。
  • 更多设置详见F2。

area 区域图

avatar

avatar

avatar

categories: Array<String>

x坐标列表,等同全部数据的宽度。

series: Array<Object>

区域的数据,可以为多个区域。如果只有一个区域,整体也应该是个数组。

  • data: Array<int> 区域的数据,一般等同categories的长度,空缺则区域不连接不绘。
  • type: String 一个区域的标识名称,多个时确保不冲突。
  • style: String 区域边线的种类,可以取值dash虚线和smooth曲线,默认直接。
  • color: String 区域和边线的颜色。
  • point: Object 是否绘制圆点,可以配置size控制点半径、stroke点颜色、lineWidth点边线宽。

xAxis: Object

x坐标轴的配置。

  • tickCount: int 显示的坐标个数。
  • htAlign: boolean 是否首尾缩进对齐。
  • 更多设置详见F2。

yAxis: Object

y坐标轴的配置,同xAxis

legend: Object

整体图例设置,默认空。

  • position: String 显示位置,可选topbottomleftright
  • offsetX: int 水平偏移。
  • offsetY: int 垂直偏移。
  • 更多设置详见F2。

tooltip: Object

触摸提示设置,默认空。

  • showTitle: boolean 是否展示标题,默认不展示。
  • showCrosshairs: 是否显示辅助线,点图、路径图、线图、面积图默认展示。
  • offsetX: int 水平偏移。
  • offsetY: int 垂直偏移。
  • 更多设置详见F2。

adjust: Object/String

  • type: String 层叠,取值stack时分组,取值dodge时多个区域在y方向上层叠。
  • marginRatio: Number 分组间柱子的间距

column 柱状图

avatar

avatar

avatar

categories: Array<String>

x坐标列表,等同全部数据的宽度。

series: Array<Object>

柱形的数据,可以为多类柱形。如果只有一类,整体也应该是个数组。

series: Array<Object>

  • data: Array<int> 区域的数据,一般等同categories的长度,空缺则区域不连接不绘。
  • type: String 一类柱形的标识名称,多类时确保不冲突。
  • color: String 柱形的颜色。

xAxis: Object

x坐标轴的配置。

  • tickCount: int 显示的坐标个数。
  • htAlign: boolean 是否首尾缩进对齐。
  • 更多设置详见F2。

yAxis: Object

y坐标轴的配置,同xAxis

legend: Object

整体图例设置,默认空。

  • position: String 显示位置,可选topbottomleftright
  • offsetX: int 水平偏移。
  • offsetY: int 垂直偏移。
  • 更多设置详见F2。

tooltip: Object

触摸提示设置,默认空。

  • showTitle: boolean 是否展示标题,默认不展示。
  • showCrosshairs: 是否显示辅助线,点图、路径图、线图、面积图默认展示。
  • offsetX: int 水平偏移。
  • offsetY: int 垂直偏移。
  • 更多设置详见F2。

adjust: Object/String

  • type: String 层叠,取值stack时分组,取值dodge时多个区域在y方向上层叠。
  • marginRatio: Number 分组间柱子的间距

coord: Object

坐标系设置

  • transposed: Boolean 是否转换,当为true时柱状图会横置x/y轴,变成条形图。

bar 条形图

avatar

avatar

avatar

同上。

coord: Object

坐标系设置

  • transposed: Boolean 是否转换,当为true时柱状图会横置x/y轴,变成条形图。

radar 雷达图

avatar

categories: Array<String>

x坐标列表,等同全部数据的宽度。

series: Array<Object>

柱形的数据,可以为多类柱形。如果只有一类,整体也应该是个数组。

series: Array<Object>

  • data: Array<int> 区域的数据,一般等同categories的长度,空缺则区域不连接不绘。
  • type: String 一类柱形的标识名称,多类时确保不冲突。
  • style: String 区域边线的种类,可以取值dash虚线和smooth曲线,默认直接。
  • color: String 区域和边线的颜色。
  • point: Object 是否绘制圆点,可以配置size控制点半径、stroke点颜色、lineWidth点边线宽。

yAxis: Object

y坐标轴的配置。

  • tickCount: int 显示的坐标个数。
  • 更多设置详见F2。

legend: Object

整体图例设置,默认空。

  • position: String 显示位置,可选topbottomleftright
  • offsetX: int 水平偏移。
  • offsetY: int 垂直偏移。
  • 更多设置详见F2。

tooltip: Object

触摸提示设置,默认空。

  • showTitle: boolean 是否展示标题,默认不展示。
  • showCrosshairs: 是否显示辅助线,点图、路径图、线图、面积图默认展示。
  • offsetX: int 水平偏移。
  • offsetY: int 垂直偏移。
  • 更多设置详见F2。

pie 饼图

avatar

avatar

avatar

avatar

series: Array<Object>

一维。

  • data: int 饼的数据量。
  • type: String 一个饼形的标识名称,多个时确保不冲突。
  • color: String 饼形的颜色。
  • key: String 当嵌套环图时使用不用的key标识不同的环。

radius: Number

饼的缩放大小,默认1。

innerRadius: Number

饼的内环缩放大小,默认0。当大于0时饼图呈现环状。

legend: Object

整体图例设置,默认空。

  • position: String 显示位置,可选topbottomleftright
  • offsetX: int 水平偏移。
  • offsetY: int 垂直偏移。
  • 更多设置详见F2。

tooltip: Object

触摸提示设置,默认空。

  • showTitle: boolean 是否展示标题,默认不展示。
  • showCrosshairs: 是否显示辅助线,点图、路径图、线图、面积图默认展示。
  • offsetX: int 水平偏移。
  • offsetY: int 垂直偏移。
  • 更多设置详见F2。

style: Objet

饼之间线的样式。

  • lineWidth: int 线宽。
  • stroke: String 线色。

guide: Object

  • line: Object 辅助线配置。
  • text: Object 辅助文字配置。

pieLabel: boolean

是否展示标签示例文字。

activeShape: boolean

饼图是否有点击效果。

sidePadding: int

标签文字和饼图之间的padding,越大越近,越小越远。

rose 玫瑰图

avatar

series: Array<Object>

一维。

  • data: int 饼的数据量。
  • type: String 一个饼形的标识名称,多个时确保不冲突。
  • color: String 饼形的颜色。

legend: Object

整体图例设置,默认空。

  • position: String 显示位置,可选topbottomleftright
  • offsetX: int 水平偏移。
  • offsetY: int 垂直偏移。
  • 更多设置详见F2。

tooltip: Object

触摸提示设置,默认空。

  • showTitle: boolean 是否展示标题,默认不展示。
  • showCrosshairs: 是否显示辅助线,点图、路径图、线图、面积图默认展示。
  • offsetX: int 水平偏移。
  • offsetY: int 垂直偏移。
  • 更多设置详见F2。

scatter 散点图

avatar

series: Array<Object>

点的数据,可以为多组点。如果只有一组点,整体也应该是个数组。

  • data: Array<Object> 点的数据。
    • key: Number x坐标值。
    • value: Number y坐标值。
  • type: String 一组点的标识名称,多组时确保不冲突。
  • color: String 点的颜色。
  • size: Number 点大小。

xAxis: Object

x坐标轴的配置。

  • tickCount: int 显示的坐标个数。
  • htAlign: boolean 是否首尾缩进对齐。
  • 更多设置详见F2。

yAxis: Object

y坐标轴的配置,同xAxis

style: Objet

点的样式。

  • fillOpacity: Number 透明度。

legend: Object

整体图例设置,默认空。

  • position: String 显示位置,可选topbottomleftright
  • offsetX: int 水平偏移。
  • offsetY: int 垂直偏移。
  • 更多设置详见F2。

tooltip: Object

触摸提示设置,默认空。

  • showTitle: boolean 是否展示标题,默认不展示。
  • showCrosshairs: 是否显示辅助线,点图、路径图、线图、面积图默认展示。
  • offsetX: int 水平偏移。
  • offsetY: int 垂直偏移。
  • 更多设置详见F2。

k 股票k线图

avatar

series: Array<Object>

一维。

  • time: String 时间。
  • start: Number 开盘价。
  • end: Number 收盘价。
  • max: Number 最高价。
  • min: Number 最低价。

xAxis: Object

x坐标轴的配置。

  • tickCount: int 显示的坐标个数。
  • htAlign: boolean 是否首尾缩进对齐。
  • 更多设置详见F2。

yAxis: Object

y坐标轴的配置,同xAxis

guide: Object

  • line: Object 辅助线配置。
  • text: Object 辅助文字配置。

timeshare 分时图

avatar

series: Array<Object>

一维。

  • time: String 时间。
  • price: Number 价格。
  • volume: Number 成交量。

xAxis: Object

x坐标轴的配置。

  • tickCount: int 显示的坐标个数。
  • htAlign: boolean 是否首尾缩进对齐。
  • 更多设置详见F2。

yAxis: Object

y坐标轴的配置,同xAxis

guide: Object

  • line: Object 辅助线配置。
  • text: Object 辅助文字配置。