ShowAPI,自营为主的数据交易市场
立即注册

定制图表

提供者: 易源官方 免费使用

本api旨在为不太了解前端js或者不想写前端js的开发人员提供一个简单易用的参数定制图表,支持常规的线图、饼图、柱图、面积图以及特有的文字云图。开发者使用仅需像其他api一样传参即可取到一个html的iframe代码片段,将该片段插入要展现图表的页面即可。详情请见基本资料页面API说明部分。

浏览量:22035

调用量:202884

使用人数:1851

点赞:50929

申请使用 查看演示
文档 授权签名(重要) 联系信息 价格一览表 接口演示
API说明(接口商自定义)
使用说明
接入点列表
双数值(时间)坐标曲线图柱图
类目型坐标曲线图柱图
饼图、环形图、玫瑰图
标题链接、tag链接云图
资源列表
·SDK及代码示例
规则中心
·名词解释
·常见问题

请求URL地址

http://route.showapi.com/322-1
注意:接口支持https,更安全,但稍慢一些,你懂的。请根据自己的情况进行选择。

请求参数

HTTP协议,支持GET/POST方法。
非文件上传的POST时,enctype=application/x-www-form-urlencoded。
文件上传的POST时,enctype=multipart/form-data。
1.系统级参数(所有接入点都需要的参数):+点此展开
2.应用级参数(每个接入点有自己的参数):
参数名称 类型 默认值 示例值 必须 描述
title String 示例图表 图表标题
descript String 这是一个示例图表 以灰色小字显示在标题下方
backgroundColor String 125,125,125,0 图表背景,RGBA颜色,前三段为红绿蓝颜色,第四段为透明度
yAxisFormatter String {value}℃ Y轴和tip中显示用的格式化字符串,显示时将使用实际数值替换{value},默认值为{value}。当Y轴为时间时将忽略该参数
width String 图表iframe的宽度,使用数值。不设置将使用父容器的宽度
height String 参见宽度说明
showToolbox String 默认将显示图表工具箱,不需要显示则传false
showLegend String 默认将显示图例,不需要显示则传false
smooth String 默认曲线为折线,如需要平滑曲线请传入true
showArea String 默认显示曲线图,如需要显示面积图请传入true
chartType String 默认显示曲线图,如需要初始显示柱图请传入bar
xAxisFormatter String X轴和tip中显示用的格式化字符串,显示时将使用实际数值替换{value},默认值为{value}。当X轴为时间时将忽略该参数
xAxisType String time X轴类型,默认为value。可选为time
yAxisType String Y轴类型,默认为value。可选为time
data String [{name:'测试数据',data:[[1436287383431, 10], [1436287385431, 7], [1436287387431, 8], [1436287389431, 6], [1436287391431, 12], [1436287392431, 9], [1436287395431, 6], [1436287397431, 4], [1436287399431, 9]]}] 图表数据,标准JSON对象格式数组,每个元素对应一条曲线. 元素内name表示曲线名称;元素内data为曲线数据的数组,每个曲线数据对应[X轴数据,Y轴数据],如果对应的坐标轴为时间类型,则数据使用时间戳. 请参照示例使用

返回参数

以JSON格式返回结果。
1.系统级参数(所有接入点都会返回的参数):+点此展开
2.应用级参数(系统级输出参数showapi_res_body字段中的json数据结构):
名称 类型 示例值 描述
ret_code Number 0 错误码
errorMsg String 错误信息(本接口只校验了必填项,格式并没有校验。请严格按照参数描述传参)
iframe String html iframe代码
  • 请求实例
  • java_sdk
  • 纯java
  • curl
  • php
  • android
  • python
String res=new ShowApiRequest("http://route.showapi.com/322-1","my_appId","my_appSecret")
           .addTextPara("serieName1","昆明温度")
           .addTextPara("serieData1","[[1436420089019,23],1436430089019,20],1436440089019,18],1436450089019,15],1436460089019,21]]")
           .addTextPara("title","示例图表")
           .addTextPara("descript","这是一个示例图表")
           .addTextPara("backgroundColor","125,125,125,0.4")
           .addTextPara("yAxisFormatter","{value}℃")
           .addTextPara("serieName2","")
           .addTextPara("serieData2","")
           .addTextPara("width","")
           .addTextPara("height","")
           .addTextPara("showToolbox","")
           .addTextPara("showLegend","")
           .addTextPara("smooth","")
           .addTextPara("showArea","")
           .addTextPara("chartType","")
           .addTextPara("xAxisFormatter","")
           .addTextPara("xAxisType","time")
           .addTextPara("yAxisType","")
           .post();
System.out.println(res);

                  public static void main(String path[]) throws Exception {
									URL u=new URL("http://route.showapi.com/322-1?showapi_appid=myappid&title=&descript=&backgroundColor=&yAxisFormatter=&width=&height=&showToolbox=&showLegend=&smooth=&showArea=&chartType=&xAxisFormatter=&xAxisType=&yAxisType=&data=&showapi_sign=mysecret");
									InputStream in=u.openStream();
									ByteArrayOutputStream out=new ByteArrayOutputStream();
									try {
										byte buf[]=new byte[1024];
										int read = 0;
										while ((read = in.read(buf)) > 0) {
											out.write(buf, 0, read);
										}
									}  finally {
										if (in != null) {
											in.close();
										}
									}
									byte b[]=out.toByteArray( );
									System.out.println(new String(b,"utf-8"));
							}
						 
						
						//字段值为中文、空格、特殊符号的地方需要做urlencode,编码为utf-8。用js的方式就是:
						//encodeURIComponent('中文')
						//比如"中文"转换后就是%25E4%25B8%25AD%25E6%2596%2587
            curl   "http://route.showapi.com/322-1?showapi_appid=123&showapi_sign=use_my_sign&serieName1=昆明温度&serieData1=[[1436420089019,23],1436430089019,20],1436440089019,18],1436450089019,15],1436460089019,21]]&title=示例图表&descript=这是一个示例图表&backgroundColor=125,125,125,0.4&yAxisFormatter={value}℃&serieName2=&serieData2=&width=&height=&showToolbox=&showLegend=&smooth=&showArea=&chartType=&xAxisFormatter=&xAxisType=time&yAxisType=&"
						
						 //md5签名方式--非简单签名
               			<?php
							header("Content-Type:text/html;charset=UTF-8");
							date_default_timezone_set("PRC");
							$showapi_appid = 'xxxxxx';  //替换此值,在官网的"我的应用"中找到相关值
							$showapi_secret = 'xxxxxxxxx';  //替换此值,在官网的"我的应用"中找到相关值 
							$paramArr = array(
							     'showapi_appid'=> $showapi_appid,
								 'title'=> "",
								 'descript'=> "",
								 'backgroundColor'=> "",
								 'yAxisFormatter'=> "",
								 'width'=> "",
								 'height'=> "",
								 'showToolbox'=> "",
								 'showLegend'=> "",
								 'smooth'=> "",
								 'showArea'=> "",
								 'chartType'=> "",
								 'xAxisFormatter'=> "",
								 'xAxisType'=> "",
								 'yAxisType'=> "",
								 'data'=> ""
							     //添加其他参数
							);
							
							//创建参数(包括签名的处理)
							function createParam ($paramArr,$showapi_secret) {
							     $paraStr = "";
							     $signStr = "";
							     ksort($paramArr);
							     foreach ($paramArr as $key => $val) {
							         if ($key != '' && $val != '') {
							             $signStr .= $key.$val;
							             $paraStr .= $key.'='.urlencode($val).'&';
							         }
							     }
							     $signStr .= $showapi_secret;//排好序的参数加上secret,进行md5
							     $sign = strtolower(md5($signStr));
							     $paraStr .= 'showapi_sign='.$sign;//将md5后的值作为参数,便于服务器的效验
							     echo "排好序的参数:".$signStr."
\r\n"; return $paraStr; } $param = createParam($paramArr,$showapi_secret); $url = 'http://route.showapi.com/322-1?'.$param; echo "请求的url:".$url."
\r\n"; $result = file_get_contents($url); echo "返回的json数据:
\r\n"; print $result.'
\r\n'; $result = json_decode($result); echo "
\r\n取出showapi_res_code的值:
\r\n"; print_r($result->showapi_res_code); echo "
\r\n"; ?>
						//以下代码为纯java实现,并未依赖第三方框架,具体传入参数请参看接口描述详情页.
						protected Handler mHandler =  new Handler();
						protected void onCreate(Bundle savedInstanceState) {
								super.onCreate(savedInstanceState);
								setContentView(R.layout.activity_main);
								final TextView txt = (TextView) this.findViewById(R.id.textView1);
								Button myBtn = (Button) this.findViewById(R.id.button1);
								myBtn.setOnClickListener(new OnClickListener() {
									public void onClick(View v) {
										new Thread(){
											//在新线程中发送网络请求
											public void run() {
												String appid="xxx";//要替换成自己的
												String secret="xxxxxxx";//要替换成自己的
												final String res=new ShowApiRequest( "http://route.showapi.com/322-1", appid, secret)
                    .addTextPara("title", "")
                                .addTextPara("descript", "")
                                .addTextPara("backgroundColor", "")
                                .addTextPara("yAxisFormatter", "")
                                .addTextPara("width", "")
                                .addTextPara("height", "")
                                .addTextPara("showToolbox", "")
                                .addTextPara("showLegend", "")
                                .addTextPara("smooth", "")
                                .addTextPara("showArea", "")
                                .addTextPara("chartType", "")
                                .addTextPara("xAxisFormatter", "")
                                .addTextPara("xAxisType", "")
                                .addTextPara("yAxisType", "")
                                .addTextPara("data", "")
            .post();
												
												System.out.println(res);
												//把返回内容通过handler对象更新到界面
												mHandler.post(new Thread(){
													public void run() {
														txt.setText(res+"  "+new Date());
													}
												});
											}
										}.start();
										
										
									}
								});
						}

						
#phthon3.5
from urllib import    request, parse
import json

print('send data....')
showapi_appid="xxxxxxxxxx"  #替换此值
showapi_sign="xxxxxxxxxx"   #替换此值
url="http://route.showapi.com/322-1"
send_data = parse.urlencode([
    ('showapi_appid', showapi_appid)
    ,('showapi_sign', showapi_sign)
                    ,('title', "")
                    ,('descript', "")
                    ,('backgroundColor', "")
                    ,('yAxisFormatter', "")
                    ,('width', "")
                    ,('height', "")
                    ,('showToolbox', "")
                    ,('showLegend', "")
                    ,('smooth', "")
                    ,('showArea', "")
                    ,('chartType', "")
                    ,('xAxisFormatter', "")
                    ,('xAxisType', "")
                    ,('yAxisType', "")
                    ,('data', "")
    
  ])

req = request.Request(url) 
with request.urlopen(req, data=send_data.encode('utf-8')) as f:
    print('Status:', f.status, f.reason)
    str_res= f.read().decode('utf-8')
    print('str_res:',str_res)
    json_res=json.loads(str_res)
    print ('json_res data is:', json_res)

    
						 

						

返回实例

{
	"showapi_res_code": 0,
	"showapi_res_error": "",
	"showapi_res_body": {
		"ret_code": "0",
		"errorMsg": "",
		"iframe": ""
	}
}




请求地址 请求参数 返回参数 请求示例 返回示例
接入点列表
双数值(时间)坐标曲线图柱图
类目型坐标曲线图柱图
饼图、环形图、玫瑰图
标题链接、tag链接云图
  • 免费套餐(双数值(时间)坐标曲线图柱图)

免费套餐_无认证版

0时间:1年

  • 不限调用次数
  • 1次/秒调用频率
  •  
  •  
点此订购

免费套餐_基本认证版

0时间:1年

  • 不限调用次数
  • 2次/秒调用频率
  • 邮箱认证 要求
  • 手机认证 要求
点此订购

免费套餐_实名认证版

0时间:1年

  • 不限调用次数
  • 3次/秒调用频率
  • 邮箱认证 要求
  • 手机认证 要求
  • 实名认证 要求
点此订购