分类目录归档:图形格式

JS数组处理


Smartchart开发中, 最常需使用的就是对数组进行处理

JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素。 要取得Array的长度,直接访问length属性:

var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6

请注意,直接给Array的length赋一个新的值会导致Array大小的变化:

var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr变为[1, 2, 3, undefined, undefined, u

Read more

常见html组件


常见html组件
类型 标签 说明 效果
文字 h1..h6 <h4>我是中号字体</h4>

我是中号字体

文字 br 换行
图片 img <img src="smiley-2.gif" alt="Smiley face" width="42" height="42">
嵌入 iframe <iframe src="http://www.smartchart.cn"></iframe>
链接 a <a href="http://www.smartchart.cn" target="_blank"

Read more

常用样式参考


样式操作:

要想大屏做得好, 样式要写得好 可是我们不是前端的同学也能写样式么 当然可以, 相信你观看完以下视屏即可

快速上手样式开发

smartchart开发方法, 参考专业版本开发文档

基础样式入门:

CSS介绍

CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。

CSS语法

CSS实例 每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 输入图片说明 CSS注释

/*这是注释*/

注释是代码之母, smartchart编辑中你可以使用CTRL+/

Read more

SMARTCHART前端数据处理函数


smartchart图形中可用的转化函数

//行列替换
function ds_transform(dataset)
//将第一列拆分成多个字段,默认逗号分隔, 如果不传表头,取SQL中的字段名拆分
function ds_split(data,sep=',',head_add=[])
//获取第一列的名称
function ds_rowname(dataset,start_row=1)
//移除指定指定的列
function ds_remove_column(dataset,remove_list=[0])
// data表示传入的二位数组,生成结果表示为key->[]

Read more

SMARTCHART动态效果


第一种动态效果: 按系列轮放

参考: 饼图自动播放

设定方法:

  • 如果不改动图形, 可以在"仪表盘" --> 高级设定中 进行

    //动态播放
      "animate":{"2":{"dataLen":5,"interval":1000,"showtip":1}},
  • 以上方法最简单,但有一个弊端, 需要指定dataLen, 有时可能dataLen不固定,这样你可以采用在图形设定的最后加上一段即可:

    //基于数据项动态设定
    startSelectAnimate(myChart__name__,legend_label.length,1000,1);

第二种动态效果: 时间轴模式(当然不一

Read more

SMARTCHART联动钻取指南


数据集准备

首先在需要进行联动的数据集中SQL的写法如下, 比如对应2号图形:

注意 /* ... */的写法, 当参数写在这个区间时, 如果外部没有传入参数, 
会自动忽略这一段代码, 这样对于钻取来说非常重要, 
初始时全部显示, 点击其它图形时传入参数进行动态钻取

select xxx,xxx,xxx from tablename /* where xxxx = '$参数名' */ ....

常规方法

在dashboard设定中的 高级 --> 扩展参数,点击"加载样式", 自动下载样式, 进行如下配置, 这样就可以实现当1号图形点击时,对2号图形进行钻取显示.

Read more

SMARTCHART图形简单联动


简单的实现方式

要实现图形的联动效果, 首先我们得需要图形之间的数据的维度至少有一个维度是相同的

//首先我们假设有一个这样的数据集:
[
 ['product', 'A', 'B', 'C', 'D', 'E', 'F'],
 ['2017', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
 ['2018', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
 ['2019', 24

Read more

SMARTCHART实现筛选器


通用实现方式

SMARTCHART实现筛选最简单的方法只需要配一个控件即可:

//建立一个筛选清单数据集, 并指定一个参数名, 比如city, 那么可以这么写
 Select xxxx as city from tablename..... 注意将数据集设定中的"带头部"选上,
 则会生成一个如下的数据集: 
 [['city'],[选项1],[选项2],..]

//那么在图形展示所使用的数据集中, 需要使用 这个city做为参数写查询, 比如:
select xx, xx, xx from tablename where xx = '$city&

Read more

SMARTCHART样列数据集


最近有小伙伴说如果不了解数据库, 或手上没有现成数据库连接, 那么是否可以玩转SmartChart, 今天他来了, 我们支持你自定义数据进行demo展示

STEP1: 进入 "数据集装箱" --> "图形格式设定"
STEP2: 选择一个你喜欢的图形, 点击进入编辑界面, 下方点击 "保存为新的"

STEP3: 你可以复制你EXCEL中数据(注意是统计好的数据,smartchart不会主动做统计), 粘贴到 数据样本区, 然后点击 "保存并继续编辑"

STEP4: 系统自动将数据转化成数组格式,你也可以直接输入这种数组格式, 格式请参考 数据集指南

之后你就可以在上方点击图标 预览

Read more

为smartchart增加表格图形


Echart 有提供了图形的展示, 但是没有表格, smartchart当然不能少了表格 smartchart 是一个非常灵活的平台, 增加表格功能也是相当容易, 今天就教大家如何增加表格图形, 同时也可以了解自定义图形的使用方法


首先我们点击新建图形, 将默认的code全部删除, 贴入以下code,

  • {{dataset}}--由平台传进来的数据集,请参考上篇文章, dataset格式说明
  • dom_{{name}}--这个是用来唯一标识这个表的, 总之这么写就行了
  • 其它的都是简单的js代码了, 遍历打印出html
var data={{dataset}};
var table = &#

Read more