构建 ChartWrapper 类的新实例。
全称 | mx.charts.ChartWrapper |
命名空间 | mx.charts |
类 | ChartWrapper |
继承层次结构 | ChartWrapper |
源文件 | ~\mx\scripts\charts\ChartWrapper.js |
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 | 当鼠标移至图表中的数据点上方时,将会触发该事件。 |
该参数常见值包括:
值示例:
值示例: