Highcharts使用说明
- 格式：doc
- 大小：465.00 KB
- 文档页数：11
版本信息
代码号 代码版本 文档更新内容 文档更新时间 作者
Highchart 1.0 创建 2010-6-22 范见涛
Highchart 1.1 增加散点图、组合图2、分布趋势图，
但没有新增到DssExt中 2011-4-11 范见涛
1 EXT应用
1.1 标签说明
属性 属性类型 是否必须 默认值 说明
id String 是 展示chart图的容器id，必须唯一，ext中自动生成
shape String 是 图形类型，
line：曲线图、column：柱状图、pie：饼图、regression：散点回归图、bar：横向柱状、
area：面积图、combo：组合图、
dynamic：动态线形时间序列图、
xcol String 是 X轴所用字段名，如果是时间序列型，必须定义xAxisType属性
ycol String 是 Y轴所用字段名
scol String 是 S轴所用字段名
height String 否 800 高度，格式：width="760"
width String 否 400 宽度，格式：height="400"
formatCol String 否 #,##0 数据格式化字段名，格式为：##,###、##,###.00，显示百分数时，格式为：00.00%
unitCol String 否 指标单位字段名，显示百分数时，单位为： %
isRegressionCol String 否 1 是否显示回归，默认都为散点和回归，为“1”：散点和回归，为“0”：柱形
适合regression图
title String 否 标题
action String 否 JavaScript函数，该函数有3个参数，分别返回当前X、Y、S轴的值，如： test(xvalue,yvalue,svalue)
margin String 否 40,20,40,70 chart图与容器四边的距离 格式：上-右-下-左，如：
margin = "40, 20, 40, 70"
showBorder Boolean 否 false 是否有边框 xAxisType String 否 normal X轴的数据类型：普通型(normal)和时间序列型(datatime)，如：xAxisType="datetime"
如果是时间序列型，xcol的日期格式为：yyyy、yyyyMM或yyyyMMdd。
适合line图、regression图、area图
showLegend Boolean 否 true 是否显示图例，如showLegend = true
legendLayout String 否 图例布局：垂直(vertical) 水平(horizontal)，如：
legendLayout="vertical"
legendPosition String 否 图例的显示位置，如：legendPosition="left:
'auto',bottom: 'auto',right: '10px',top:
'10px'"
legendBgColor String 否 图例的背景颜色，如：legendBgColor="#ffffff"
markerEnabled Boolean 否 true 在线性图上是否显示圆点等标记（线条是否是光滑型的），如：markerEnabled="false"
适合line图、area图
multiAxis Boolean 否 false 是否显示多轴（多条Y轴），如：
multiAxis="false"
适合line图、column图
1.2 使用示例
ycol="y" scol="s" width="800" height="400">
select * from( select t.mark_area, a.mark_area_desc as "x", sum(t.acct_cnt) as "y", '营销单元' as "s", '000.00' format from ${DM_USER}.dm_c_nuq_2g_zero_cell t, ${DSS_USER}.code_mark_area a where a.mark_area = t.mark_area and t.area_no = '571' group by t.mark_area, a.mark_area_desc order by t.mark_area ) where rownum < 10 ]]>
select *
from(
select t.mark_area,
a.mark_area_desc as "x",
sum(t.acct_cnt) as "y",
'营销单元' as "s",
'000.00' format
from ${DM_USER}.dm_c_nuq_2g_zero_cell t,
${DSS_USER}.code_mark_area a
where a.mark_area = t.mark_area
and t.area_no = '571'
group by t.mark_area, a.mark_area_desc order by t.mark_area
)
where rownum < 10
]]>
1.3 图形示例
线性图：
柱形图：
多轴柱形图：
回归线图：
复合图形：
时间序列图：
饼图：
面积图：
2 JSP应用
2.1 引入JavaScript
src="${pageContext.request.contextPath}/resources/highcharts/jquery.min.js">
src="${pageContext.request.contextPath}/resources/highcharts/highcharts.src.js">
2.2 引入标签
<%@ taglib prefix="hc" uri="/bonc-highcharts-tags" %>
2.3 标签说明
属性 属性类型 是否必须 默认值 说明
id String 是 展示chart图的容器id，必须唯一，ext中自动生成
shape String 是 图形类型，
line：曲线图、column：柱状图、pie：饼图、regression：散点回归图、bar：横向柱状、
area：面积图、combo：组合图、
dynamic：动态线形时间序列图、
combo2:双轴组合图、
scatter：散点图、
symbols：分布趋势图
data String 是 图形数据，类型为：List，Map的key值为X、Y、S
xcol String 是 X轴所用字段名，如果是时间序列型，必须定义xAxisType属性
ycol String 是 Y轴所用字段名
scol String 是 S轴所用字段名
height String 否 800 高度，格式：width="760"
width String 否 400 宽度，格式：height="400"
formatCol String 否 #,##0 数据格式化字段名，格式为：##,###、##,###.00，显示百分数时，格式为：00.00%
unitCol String 否 指标单位字段名，显示百分数时，单位为： %
isRegressionCol String 否 1 是否显示回归，默认都为散点和回归，为“1”：散点和回归，为“0”：柱形
适合regression图
title String 否 标题
action String 否 JavaScript函数，该函数有3个参数，分别返回当前X、Y、S轴的值，如： test(xvalue,yvalue,svalue)
margin String 否 40,20,40,70 chart图与容器四边的距离 格式：上-右-下-左，如：
margin = "40, 20, 40, 70"
showBorder Boolean 否 false 是否有边框
xAxisType String 否 normal X轴的数据类型：普通型(normal)和时间序列型(datatime)，如：xAxisType="datetime"
如果是时间序列型，xcol的日期格式为：yyyy、yyyyMM或yyyyMMdd。
适合line图、regression图、area图
showLegend Boolean 否 true 是否显示图例，如showLegend = true
legendLayout String 否 图例布局：垂直(vertical) 水平(horizontal)，如：
legendLayout="vertical"
legendPosition String 否 图例的显示位置，如：legendPosition="left:
'auto',bottom: 'auto',right: '10px',top:
