ChartCool API生成图表接口文档
一、功能介绍

ChartCool开放API根据图表类型和数据生成相应的图表，直接返回图片地址。通过开放API，您可以将生成的图片嵌入到已有的产品及生产环境中，适用于批量生成图片数据，在线BI、大数据屏幕显示等场景。

ChartCool开放API支持包括线性图、柱状图、饼图、散点图、雷达图、热力图、矩阵树图、旭日图、平行坐标图、桑基图、漏斗图和组合图的生成，其他类型图表在不断的更新中。

二、调用限制
请求协议 https
字符编码 utf-8
响应格式 json
请求参数 参考下面请求参数表格
并发限制 100次/分钟
支持类型 线性图、柱状图、饼图、散点图、雷达图、热力图、矩阵树图、旭日图、平行坐标图、桑基图、漏斗图和组合图
三、使用流程
1、注册ChartCool账号

使用微信扫码注册并登录ChartCool管理后台官网，进入开放API首页；

2、申请接入ChartCool API

在"应用管理"页面中点击新增应用，填写名称、logo和简述等相关信息；

3、开通服务

在套餐服务页面，并购买对应套餐；

4、接入服务

开通成功后，点击开放API首页中的"应用管理"，您可在此处查看Appkey、AppSecret 等信息，查询套餐购买记录及每日用量信息。阅读下方的API接口说明进行接入，有任何问题都可以微信公众号联系我们为您解决问题。

四、API接口接入流程
1、通用生成API HTTPS 地址：
【地址】：https://www.ichartcool.com/api/api/chart/create
【方式】：POST
【参数说明】
参数 类型 是否必须 说明
appkey string 是 申请的appkey
charttype string 是 图表类型：line(线性图) ,bar(柱状图) ,pie(饼图) ,scatter(散点图) ,radar(雷达图) ,heatmap(热力图) ,treemap(矩阵树图) ,sunburst(旭日图) ,parallel(平行坐标图) ,sankey(桑基图) ,funnel(漏斗图)
salt string 是 随机数
sign string 是 (appkey+charttype+salt+AppSecret)的md5值
data JSON 是 需要生成图表的json数据(格式参考3)
【返回示例】：
{ "code": 0, "msg": "成功", "data": { "imgurl": "http://www.ichartcool.com/img/FiejiTMyDTZNHXVabtyyPXLaRHib" } }
2、签名生成方法
2.1、签名是为了保证调用安全，使用 MD5 算法生成的一段字符串，生成的签名长度为 32 位，签名中的英文字符均为小写格式
【生成方法】：
Step1：
将请求参数中的 APPKEY(appkey)， 图表类型 charttype，随机数(salt)，以及平台分配的密钥（AppSecret）(可在管理控制台查看) 按照 appkey+charttype+salt+AppSecret的顺序拼接得到字符串 1
Step2：
对字符串 1 做 MD5 ，得到 32 位小写的 sign
3、data的json数据格式与charttype关联说明(json数据格式说明)

3.1 charttype=line(线图)：

图表类型(charttype) line
数据格式(data) {"title":"访问来源","type":"line","xaxisv":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],"datav":[[150,230,224,218,135,147,260]],"type":"smooth","legendname":["星期线"]}
字段说明 title：对应标题
xaxisv：对应横坐标(一维数组)
datav：对应线上点（二维数组，多条线多个数组）
type：图表类型，支持以下类型：
            smooth：双曲线图
            stack：双曲线堆积图
            step：折线阶梯图
            area：曲线面积图
            markPoint：曲线标记图
            stack3：三曲线堆积图
legendname：可选,右上角图例名称,有值则显示，数组个数对应datav数组个数
颜色配置 color：可选，自定义颜色数组，数组长度需要与数据系列数量一致
示例：{"xaxisv":["Mon","Tue","Wed"],"datav":[[120,200,150]],"type":"smooth","color":["#ff0000"]}
举例 两条线例子：
{"title":"访问来源",xaxisv: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] ,datav: [[150, 230, 224, 218, 135, 147, 260],[152, 210, 214, 188, 105, 107, 230]],"type":"smooth","legendname":["第一条线","第二条线"]}
案例图 https://www.ichartcool.com/img/Fmge2yRZ0O6Fvf5f6YulOCBDJqQJ

3.2 charttype=bar(柱状图)：

图表类型(charttype) bar
数据格式(data) {"title":"Bar Chart","xaxisv":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],"datav":[[120,200,150,80,70,110,130]],"type":"stack","colors":["#5470c6","#91cc75"],"legendname":["Chart"]}
字段说明 title：对应标题
xaxisv：对应横坐标(一维数组)
datav：对应线上点（二维数组，多条线多个数组）
type：图表类型，支持以下类型：
             stack：柱形图横坐标堆积
             customWidth：自定义柱形图宽度
             labelMarkLine：带标签与均线的柱形图
             stackLeftRight：柱形图横坐标左右堆积
             horizontalStack：横向堆积柱形图对比
colors：可选，自定义颜色数组，数组长度需要与数据系列数量一致
legendname：可选,右上角图例名称,有值则显示，数组个数对应datav数组个数
颜色配置 示例：{"xaxisv":["Mon","Tue","Wed"],"datav":[[120,200,150]],"type":"stack","color":["#ff0000"]}
举例 两条柱状例子：
{"title":"Bar Chart",xaxisv: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] ,datav: [[120, 200, 150, 80, 70, 110, 130],[152, 210, 214, 188, 105, 107, 230]],"legendname":["第一条柱子","第二条柱子"]}
案例图 https://www.ichartcool.com/img/FoTYuIzrZ8uvJVFnZfx5fEkWmAve

3.3 charttype=pie(饼图)：

图表类型(charttype) pie
数据格式(data) {"title":"Referer of a Website","datav":[{"value":1048,"name":"SearchEngine"},{"value":735,"name":"Direct"}],"type":"ring","isshowpercent":true,"isshowdata":true,"islegend":true}
字段说明 title：对应标题
datav：对应饼图区块(一维数组，value对应饼图的块值，name对应饼图名称)
type：图表类型，支持以下类型：
            ring：环形饼图
            ringRose：环形玫瑰图
            rose：玫瑰饼图
            radius：相同角度玫瑰图
            concentric：同心饼图
            position：不一饼图
            compare：饼图对比
isshowdata：可选，是否显示数值，true显示，false或不设置不显示
isshowpercent：可选，是否显示百分比，true显示，false或不设置不显示
islegend：可选，是否显示右上角图例，true显示，显示datav中的name字段值
颜色配置 color：可选，自定义颜色数组，数组长度需要与饼图区块数量一致
示例：{"title":"Referer","datav":[{"value":1048,"name":"SearchEngine"},{"value":735,"name":"Direct"}],"type":"ring","color":["#ff0000","#00ff00"]}
举例 一个饼图两块区域例子：
{title:'标题',datav:[{value:1048,name:'SearchEngine'},{value:735,name:'Direct'}],"isshowpercent":true,"isshowdata":true,"islegend":true}
案例图 https://www.ichartcool.com/img/FubQKzECFr24T0wqRtveTnFR2NCU

3.4 charttype=scatter(散点图)：

图表类型(charttype) scatter
数据格式(data) {"title":"Scatter Chart","datav":[[8.07,6.95],[13.0,7.58],[9.05,8.81]],"type":"density"}
字段说明 title：对应标题
datav：对应散点(二维数组，0代表x值，1是y值)
type：图表类型，支持以下类型：
            density：高密度散点图
            proportional：比例大小散点图
            dynamic：动态散点图
颜色配置 color：可选，自定义颜色数组，数组长度需要与数据系列数量一致
示例：{"datav":[[8.07,6.95],[13.0,7.58]],"type":"proportional","color":["#ff0000"]}
举例 四个散点例子
{datav:[[20,10],[8.07,6.95],[13.0,7.58],[9.05,8.81]]}
案例图 http://www.ichartcool.com/img/FoLZveBNTk647l_2bLsiVpRYWnPV

3.5 charttype=radar(雷达图)：

图表类型(charttype) radar
数据格式(data) {"title":"BasicRadarChart","xaxisv":["Sales","Administration"],"datav":[[4200,3000],[5000,14000]],"type":"circle"}
字段说明 title：对应标题
xaxisv：对应雷点名称(一维数组，几个值就几个雷点)
datav：对应雷点值(二维数组，[1,1]对应雷点值，多个条线可以多个一维数组)
type：图表类型，支持以下类型：
            circle：圆形雷达图
            circleColor：圆形雷达图区域颜色
            markPoint：标记雷达图
            multiDimensional：多维度雷达图
            area：面积雷达图
颜色配置 color：可选，自定义颜色数组，数组长度需要与数据系列数量一致
示例：{"title":"雷达图","xaxisv":["Sales","Admin"],"datav":[[4200,3000]],"type":"circle","color":["#ff0000"]}
举例 三个雷点三条线例子
{title:'title',xaxisv:['Sales','Buy','BS'],datav:[[4200,3000,2000],[5000,14000,300],[2000,1200,1300]]}
案例图 https://www.ichartcool.com/img/FntfhURYTJ6LLrJi2lLZ-k5AimSg

3.6 charttype=heatmap(热力图)：

图表类型(charttype) heatmap
数据格式(data) {"title":"Heatmap Chart","xaxisv":['1','2','3'],"yaxisv":['1','2','3'],"datav": [[0,0,1]]}
字段说明 title：对应标题
xaxisv：对应x轴坐标值(一维数组)
yaxisv：对应Y轴坐标值(一维数组)
datav：对应热力图区域值(二维数组，[0,0,1]第一位x轴位置，第二位Y轴位置，第三位是对应值)
举例 x=0只有一列的热力图
{xaxisv:[150, 230, 224, 218, 135, 147, 260],yaxisv:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],datav:[[0, 0, 2], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0],[0,6,1]]}o
案例图 http://www.ichartcool.com/img/Fo4M9V5izfWgiawCvXHJa1KM3HYo

3.7 charttype=treemap(矩阵树图)：

图表类型(charttype) treemap
数据格式(data) {"title":"Treemap Chart","datav": [{"value": v1,"name": "name1"},{"value": v2,"name": "name2","children": [{"value": v21,"name": "name21","children": [{"value": v211,"name": "name211"}]}]}]}
字段说明 title：对应标题
datav：对应区树域值(一维维数组，v1和name1对应一整个树名称和值，children的v21和name21的区域属于v2和name2的切割部分，children的v211和name211属于v2和name2只树叉下的只模块)
举例 简单两层矩阵例子
{title:'title',datav:[{'value': 11,'name': 'name1'},{'value': 2,'name': 'name2','children': [{'value': 21,'name': 'name21','children': [{'value': 211,'name': 'name211'}]}]}]}
案例图 http://www.ichartcool.com/img/Fi4zaJmg__gDNTSP1A4wMEF_Kp2P

3.8 charttype=sunburst(旭日图)：

图表类型(charttype) sunburst
数据格式(data) {"title":"Sunburst Chart","datav":[{name: 'name1',children: [{name: 'name11',value: v1,children: [{name: 'name111',value: v111}]},{name:'name12',value:v12}]}]}
字段说明 title：对应标题
datav：对应旭日区域值(一维维数组，name1最中间一层(必须)，children的v11,v12和name11,name12在name1区域的外层（第二层），children的v111和name111属于v11和name11的外层)
举例 三层分割三区域的旭日图
{datav:[{name: 'name1',children: [{name: 'name11',value: 1,children: [{name: 'name111',value: 111}]},{name:'name12',value:12}]}]}
案例图 https://www.ichartcool.com/img/FjZqPdqSc47NgxYHfhSFl8AGFfKZ

3.9 charttype=parallel(平行坐标图)：

图表类型(charttype) parallel
数据格式(data) {"title":"Parallel Chart","yaxisv":['name1','name2','name3'],"datav": [[0,0,0],[1,1,1]]}
字段说明 title：对应标题
yaxisv：y轴对应的线名称(一维数组，多个数据就多条线)
datav：对应坐标的值(二维数组[0,0,0]对应Y轴线点，多个数组多条线)
举例 七条Y轴的两条平行线例子
{yaxisv:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],datav:[[5, 1, 2,2,3,5,6], [0, 1, 1,5,8,4,6]]}
案例图 https://www.ichartcool.com/img/Fj1M3Mssx6paufXlJ0X3-q8QGA5f

3.10 charttype=sankey(桑基图)：

图表类型(charttype) sankey
数据格式(data) {"title":"Sankey Chart","datav":[{source:'a',target:'a1',value:1},{source:'a',target:'a2',value:3}]}
字段说明 title：对应标题
datav：桑基的区域值(一维数组，source开始到target结束区域，value对应区域大小值)
举例 a到a1和a2的两块区域桑基图
{datav:[{source:'a',target:'a1',value:1},{source:'a',target:'a2',value:3}]}
案例图 https://www.ichartcool.com/img/FjZzIHQKLkZuurHLHpCwu12FAw59

3.11 charttype=funnel(漏斗图)：

图表类型(charttype) funnel
数据格式(data) {"title":"Funnel Chart","datav":[{value:1,name:'name1'}]}
字段说明 title：对应标题
datav：漏斗区域值(一维数组，name区域名称，value对应区域大小值)
举例 两层漏斗图
{title:'title',datav:[{value:10,name:'name1'},{value:20,name:'name2'}]}
案例图 https://www.ichartcool.com/img/Fqvk1Ax6Vxl1tmSsY4XG6rDcP-w2

3.12 charttype=mutipy(组合图)：

图表类型(charttype) mutipy
数据格式(data) {"title":"Combination Chart","xaxisv": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],"datav": [[150, 230, 224, 218, 135, 147, 260],[120, 200, 150, 80, 70, 110, 130]],type: ["line", "bar"]}
字段说明 title：对应标题
xaxisv：对应横坐标(一维数组)
datav：对应数据值（二维数组，多个数据系列）
type：图表类型数组，支持以下组合：
            ["line","bar"]：折线图与柱状图组合
            ["line","area"]：折线图与面积图组合
            ["bar","stack"]：柱状图与堆叠柱状图组合
            ["line","scatter"]：折线图与散点图组合
颜色配置 color：可选，自定义颜色数组，数组长度需要与数据系列数量一致
示例：{"title":"组合图","xaxisv":["Mon","Tue","Wed"],"datav":[[120,200,150],[80,100,120]],"type":["bar","line"],"color":["#ff0000","#00ff00"]}
举例 折线图与柱状图组合例子：
{xaxisv: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], datav: [[150,230,224,218,135,147,260],[120,200,150,80,70,110,130]], type: ["line","bar"]}
案例图 https://www.ichartcool.com/img/FioEWWyi5MB8fBysBzkaWM_MHfeY
五、错误码列表
当生成图表无法正常返回时，请参考下表处理
错误码 含义 解决方案
200 成功
20000004 购买次数已用完 需要重新购买套餐
20000005 暂未购买套餐 需要购买套餐使用
20000006 购买次数套餐已过期 重新重新购买
21000000 appkey为空 检查请求参数appkey
21000001 appkey错误 检查请求参数appkey
23000000 data字段为空 检查请求参数data
23000001 data字段格式错误 检查请求参数data
24000000 charttype图表类型不能为空 检查请求参数charttype
24000001 charttype图表类型错误 检查请求参数charttype
25000000 salt随机数为空 检查请求参数salt
26000000 签名值为空 检查请求参数sign
26000001 签名错误 查看参数AppSecret和sign的加密字段
20000007 接口每分钟并发已达上线 控制接口请求次数
一、功能介绍
二、调用限制
三、使用流程
四、API接口接入流程
五、错误码