Giter Site home page Giter Site logo

mini-chart's Introduction

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 辅助文字配置。

mini-chart's People

Contributors

army8735 avatar phieo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mini-chart's Issues

请问下如何绘制地图呢?

比如展示**地图,hover 省份时显示自己定义的数据,请问可以支持吗?不支持的话有什么比较好的实现方式吗?

onerror TypeError: source.removeListener is not a function

你好,我再使用中抛出这个问题,请问是什么情况?

TypeError: source.removeListener is not a function
at Object.Core.Util.removeEventListener (my-f2.js:6637)
at TooltipController.unBindEvents (my-f2.js:14190)
at TooltipController.clear (my-f2.js:13847)
at Object.clearInner (my-f2.js:14235)
at Object.notify (my-f2.js:2050)
at Chart._clearInner (my-f2.js:2279)
at Chart.clear (my-f2.js:2586)
at render (index.js:8)
at index.js:114
at af-appx.worker.ide.js:1380

在使用折线图时,y轴数据出现很长的小数

数据都是整数的,但偶尔在y轴上的数字会变成很长的小数
改变行数可以正常显示 但新的数据又会复现
之前出现问题后将行数由4改成了5 但今天又出想同样的问题了

tooltip显示异常

当使用area显示多个类型数据或者line组件显示一个类型数据的时候,如果给series配置里设置point属性,会导致tooltip出现重复的数据显示
{BD1AF57E-33C3-4290-98FB-D376F5EF4336}_20190511113017

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.