构建 ChartWrapper 类的新实例。
| 全称 | mx.charts.ChartWrapper |
| 命名空间 | mx.charts |
| 类 | ChartWrapper |
| 继承层次结构 | ChartWrapper |
| 源文件 | ~\mx\scripts\charts\ChartWrapper.js |
提供封装的 AnyChart 图表控件。
示例 1
以下为 ChartWrapper 的示例。
| JavaScript 代码 |
var chart = new mx.charts.ChartWrapper({
//设置图表类型
plotType: "Pie",// 饼图
globalSettings : {
animation:{
enabled:true
}
},
title: {text: "用电量"},//创建标题对象
// 设置图表系列显示方式。default_series_type 默认值 Bar，可选值 Bar、RangeBar、Line、RangeArea、RangeSplineArea、
// Spline、Marker、Area、Bubble、Candlestick、OHLC等。
data_plot_setting: {
pie_series:{
label_settings:{
enabled:true,
position:{
anchor:"Center",
padding:20
},
format:"{%YPercentOfSeries}{numDecimals:1}%"
}
},
tooltip_settings:{
enabled:true,
format:"{%Name}Sales: ${%Value}Percent: {%YPercentOfSeries}{numDecimals: 2}%"
}
},
chart_settings: {
chart_background:{
border: {color: "blue", thickness: 2},
corners: {type: "Rounded"}, // type 默认值 Square，可选值 Square、Cut、Rounded、RoundedInner。分别代表方角、切角、圆角。
effects: {drop_shaddow: {enabled: true}}
},//设置图表背景。
axes: { y_axis: {title: {text: "度数"}}, x_axis: {title: {text: "省份"}} } //设置图表纵、横坐标标题。
},
data_plot_background: {
fill: {type: "Gradient", opacity: 0.5}, //type 默认值 Solid，可选值 Solid、Gradient、Image，分别代表实线、渐变、图片填充。
effects: {enabled: true, inner_shaddow: {enabled: true, distance: 5, angle: 30}}
},//设置图表数据区域背景。
palettes: {item: {color: "red, blue, yellow"}, gradient: {type: "Radial"}}//type 默认值 Linear，可选值 Linear、Radial，分别代表线性填充和辐射填充。
});
var dt = new mx.datas.DataTable();//数据对象
dt.addColumn({type: "string", label: "省份", id: "province"});
dt.addColumn({type: "number", label: "用电量", id: "volume"});
dt.addRow({ cells: [{value: "北京"}, {value: 1000}] });
dt.addRow({ cells: [{value: "上海"}, {value: 800}] });
dt.addRow({ cells: [{value: "广州"}, {value: 650}] });
dt.name = "series name";
chart.setData(dt);//设置图表数据
chart.draw("container");//绘制图表，container 为页面图表容器对象。
// 如果不指定绘制区域，则绘制到内部的面板容器中，添加图表时需添加内部面板对象，如下所示。
parentContainer.addControl(chart.panel); // 其中 parentContainer 为 chart 的父容器。
chart.draw(); |
构造函数
| 名称 | 说明 |
| ChartWrapper() | 构建 ChartWrapper 类的新实例。 |
初始化函数
| 名称 | 说明 |
| init() | 初始化内部 AnyChart 对象。 |
方法
| 名称 | 说明 |
| draw(p_containerId) | 在指定的容器或内置的面板内绘制图表。 |
| getJsonData() | 获取 anychart 控件所需的客户端对象设置。 |
| setChartType(p_type) | 设置图表类型。 |
| setData(p_dataTable) | 设置图表数据。 |
字段
| 名称 | 说明 |
| chart | 设置或获取 anychart 对象。 |
| chart_settings | 设置或获取图表设置，例如图表标题、背景等信息。 |
| data | 设置或获取图形 json 格式 DataTable 的数据源。 |
| data_plot_setting | 设置或获取数据情节，例如显示在图表的系列类型等。 |
| globalSettings | 设置或获取图表全局配置信息。 |
| height | 设置或获取图形高度。 |
| palettes | 设置或获取图表调色板。 包含了一组命名的颜色，自动着色标记调色板，孵化填充等。 |
| panel | 设置或获取图形默认容器面板。 |
| plotType | 设置或获取图表类型。
该参数常见值包括:
|
| pointOptions | 根据数据点的 name 属性设置或获取数据点的其它属性，具体请参考 Anychart 的官方文档。
值示例:
|
| seriesOptions | 根据系列的 name 属性设置或获取系列的其它属性，具体请参考 Anychart 的官方文档。
值示例:
|
| styles | 设置或获取图表元素风格。 包含了一组数据绘制元素的命名样式。每个类型的图表，有自己的风格设置。 例如工具提示或标签的样式。 |
| thresholds | 设置或获取图表元素阈值。 |
title |
设置或获取图形标题，json 格式。 |
| width | 设置或获取图形宽度。 |
事件
| 名称 | 说明 |
| oncreate | 当图表绘制到页面之后，将触发该事件。调用 draw 方法时会触发该事件。 |
| onload | 当图表加载之后，将触发该事件。调用 draw 方法时会触发该事件。 |
| onpointclick | 当鼠标点击图表中的数据点时，将会触发该事件。 |
| onpointmouseout | 当鼠标滑过图表中的数据点时，将会触发该事件。 |
| onpointmouseover | 当鼠标移至图表中的数据点上方时，将会触发该事件。 |
方法详细信息
draw(p_containerId) 方法
在指定的容器或内置的面板内绘制图表。
参数
- p_containerId一个容器对象ID
getJsonData() 方法
获取 anychart 控件所需的客户端对象设置。
setChartType(p_type) 方法
设置图表类型。
参数
- p_type
setData(p_dataTable) 方法
设置图表数据。
参数
- p_dataTableDataTable ，单系列时设置为一个 dataTable 实例, 如果是多系列，应该设置为一个 JSON 数组 [dataTable1, dataTable2, dataTable3, ...]， 包含多个 dataTable 实例。
字段详细信息
chart 字段
设置或获取 anychart 对象。
chart_settings 字段
设置或获取图表设置，例如图表标题、背景等信息。
data_plot_setting 字段
设置或获取数据情节，例如显示在图表的系列类型等。
globalSettings 字段
设置或获取图表全局配置信息。
height 字段
设置或获取图形高度。
默认值
400
palettes 字段
设置或获取图表调色板。
包含了一组命名的颜色，自动着色标记调色板，孵化填充等。
panel 字段
设置或获取图形默认容器面板。
plotType 字段
设置或获取图表类型。
该参数常见值包括:
- CategorizedVertical （按点垂直显示）
- CategorizedHorizontal （按点水平显示）
- CategorizedBySeriesVertical（按系列垂直显示）
- CategorizedBySeriesHorizontal（按系列水平显示）
- Scatter（按坐标轴分散显示，散点图）
- Pie（饼图）
- Polar（极坐标图）
- Radar（雷达图）
- Doughnut（圆环图）
- Map（地图）
- HeatMap（热点地图）
- TreeMap（树状分层地图）
- Funnel（漏斗图）
pointOptions 字段
根据数据点的 name 属性设置或获取数据点的其它属性，具体请参考 Anychart 的官方文档。
值示例:
- pointOptions:{"北京": {color: "AliceBlue"}, "上海": {color: "AntiqueWhite"}}
seriesOptions 字段
根据系列的 name 属性设置或获取系列的其它属性，具体请参考 Anychart 的官方文档。
值示例:
- seriesOptions:{"series1": {type: "Line", close_contour: false, style: "idLineStyle"}, "series2": {type: "Line"}}
styles 字段
设置或获取图表元素风格。
包含了一组数据绘制元素的命名样式。每个类型的图表，有自己的风格设置。
例如工具提示或标签的样式。
thresholds 字段
设置或获取图表元素阈值。
title 字段
设置或获取图形标题，json 格式。
示例 1
{text: "五日调度曲线"}
width 字段
设置或获取图形宽度。
默认值
600