全称 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 设置或获取图表类型。

该参数常见值包括:

  • 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 格式。
width 设置或获取图形宽度。

事件

名称 说明
oncreate 当图表绘制到页面之后,将触发该事件。调用 draw 方法时会触发该事件。
onload 当图表加载之后,将触发该事件。调用 draw 方法时会触发该事件。
onpointclick 当鼠标点击图表中的数据点时,将会触发该事件。
onpointmouseout 当鼠标滑过图表中的数据点时,将会触发该事件。
onpointmouseover 当鼠标移至图表中的数据点上方时,将会触发该事件。

构造函数详细信息

ChartWrapper() 方法

构建 ChartWrapper 类的新实例。

初始化函数详细信息

init() 方法

初始化内部 AnyChart 对象。

方法详细信息

draw(p_containerId) 方法

在指定的容器或内置的面板内绘制图表。

参数

  • p_containerId
    一个容器对象ID

getJsonData() 方法

获取 anychart 控件所需的客户端对象设置。

setChartType(p_type) 方法

设置图表类型。

参数

  • p_type

setData(p_dataTable) 方法

设置图表数据。

参数

  • p_dataTable
    DataTable ,单系列时设置为一个 dataTable 实例, 如果是多系列,应该设置为一个 JSON 数组 [dataTable1, dataTable2, dataTable3, ...], 包含多个 dataTable 实例。

字段详细信息

chart 字段

设置或获取 anychart 对象。

chart_settings 字段

设置或获取图表设置,例如图表标题、背景等信息。

data 字段

设置或获取图形 json 格式 DataTable 的数据源。

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

事件详细信息

oncreate 事件

当图表绘制到页面之后,将触发该事件。调用 draw 方法时会触发该事件。

onload 事件

当图表加载之后,将触发该事件。调用 draw 方法时会触发该事件。

onpointclick 事件

当鼠标点击图表中的数据点时,将会触发该事件。

onpointmouseout 事件

当鼠标滑过图表中的数据点时,将会触发该事件。

onpointmouseover 事件

当鼠标移至图表中的数据点上方时,将会触发该事件。