You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
7600 lines
306 KiB
7600 lines
306 KiB
8 years ago
|
/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.Chart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.Chart = BI.inherit(BI.Pane, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.Chart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.Chart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
|
||
|
|
this.isSetOptions = false;
|
||
|
|
this.vanCharts = VanCharts.init(self.element[0]);
|
||
|
|
|
||
|
|
this._resizer = BI.debounce(function () {
|
||
|
|
self.vanCharts.resize();
|
||
|
|
}, 30);
|
||
|
|
BI.ResizeDetector.addResizeListener(this, function (e) {
|
||
|
|
self._resizer();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
if (this.isSetOptions === true) {
|
||
|
|
this._resizer();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.vanCharts.refreshRestore()
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
var self = this, o = this.options;
|
||
|
|
o.items = items;
|
||
|
|
this.config = options || {};
|
||
|
|
this.config.series = o.items;
|
||
|
|
|
||
|
|
var setOptions = function () {
|
||
|
|
self.vanCharts.setOptions(self.config);
|
||
|
|
self.isSetOptions = true;
|
||
|
|
};
|
||
|
|
BI.nextTick(setOptions);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.Chart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.chart', BI.Chart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.CombineChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.CombineChart = BI.inherit(BI.Widget, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.CombineChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-combine-chart",
|
||
|
|
items: [],
|
||
|
|
xAxis: [{type: "category"}],
|
||
|
|
yAxis: [{type: "value"}],
|
||
|
|
types: [[], []],
|
||
|
|
popupItemsGetter: BI.emptyFn,
|
||
|
|
formatConfig: BI.emptyFn
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.CombineChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
|
||
|
|
//图可配置属性
|
||
|
|
this.CombineChart = BI.createWidget({
|
||
|
|
type: "bi.chart",
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.CombineChart.on(BI.Chart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.CombineChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
|
||
|
|
if (BI.isNotEmptyArray(o.items)) {
|
||
|
|
this.populate(o.items);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (items) {
|
||
|
|
var result = [], self = this, o = this.options;
|
||
|
|
var yAxisIndex = 0;
|
||
|
|
BI.each(items, function (i, belongAxisItems) {
|
||
|
|
var combineItems = BI.ChartCombineFormatItemFactory.combineItems(o.types[i], belongAxisItems);
|
||
|
|
BI.each(combineItems, function (j, axisItems) {
|
||
|
|
if (BI.isArray(axisItems)) {
|
||
|
|
result = BI.concat(result, axisItems);
|
||
|
|
} else {
|
||
|
|
result.push(BI.extend(axisItems, {"yAxis": yAxisIndex}));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (BI.isNotEmptyArray(combineItems)) {
|
||
|
|
yAxisIndex++;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
var config = BI.ChartCombineFormatItemFactory.combineConfig();
|
||
|
|
config.plotOptions.click = function () {
|
||
|
|
var data = BI.clone(this.options);
|
||
|
|
data.toolTipRect = this.getTooltipRect();
|
||
|
|
var items = o.popupItemsGetter(data);
|
||
|
|
if (items && items.length === 1) {
|
||
|
|
self.fireEvent(BI.CombineChart.EVENT_ITEM_CLICK, BI.extend({}, items[0], data));
|
||
|
|
}
|
||
|
|
if (items && items.length > 1) {
|
||
|
|
self._createPopup(items, data.toolTipRect, data);
|
||
|
|
}
|
||
|
|
self.fireEvent(BI.CombineChart.EVENT_CHANGE, data);
|
||
|
|
};
|
||
|
|
return [result, config];
|
||
|
|
},
|
||
|
|
|
||
|
|
_createPopup: function (items, rect, opt) {
|
||
|
|
var self = this;
|
||
|
|
if (this.combo) {
|
||
|
|
this.combo.destroy();
|
||
|
|
}
|
||
|
|
this._doDestroy = true;
|
||
|
|
this.combo = BI.createWidget({
|
||
|
|
type: "bi.combo",
|
||
|
|
direction: "bottom",
|
||
|
|
isNeedAdjustWidth: false,
|
||
|
|
popup: {
|
||
|
|
el: BI.createWidget({
|
||
|
|
type: "bi.vertical",
|
||
|
|
cls: "bi-linkage-list",
|
||
|
|
items: BI.map(items, function (i, item) {
|
||
|
|
return {
|
||
|
|
el: BI.extend({
|
||
|
|
type: "bi.text_button",
|
||
|
|
cls: "bi-linkage-list-item",
|
||
|
|
height: 30,
|
||
|
|
handler: function () {
|
||
|
|
self.fireEvent(BI.CombineChart.EVENT_ITEM_CLICK, BI.extend({}, item, opt));
|
||
|
|
self.combo.destroy();
|
||
|
|
},
|
||
|
|
hgap: 10
|
||
|
|
}, item)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
width: 0
|
||
|
|
});
|
||
|
|
BI.createWidget({
|
||
|
|
type: "bi.absolute",
|
||
|
|
element: this.element,
|
||
|
|
items: [{
|
||
|
|
el: this.combo,
|
||
|
|
top: rect.y,
|
||
|
|
left: rect.x
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
this.combo.element.hover(function () {
|
||
|
|
self._doDestroy = false;
|
||
|
|
}, function () {
|
||
|
|
self._doDestroy = true;
|
||
|
|
self._debounce2Destroy();
|
||
|
|
});
|
||
|
|
this._debounce2Destroy = BI.debounce(BI.bind(destroyCombo, this.combo), 3000);
|
||
|
|
this.combo.showView();
|
||
|
|
this._debounce2Destroy();
|
||
|
|
|
||
|
|
function destroyCombo() {
|
||
|
|
if (self._doDestroy) {
|
||
|
|
this.destroy();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setTypes: function (types) {
|
||
|
|
this.options.types = types || [[]];
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, types) {
|
||
|
|
var o = this.options;
|
||
|
|
if (BI.isNotNull(types)) {
|
||
|
|
this.setTypes(types);
|
||
|
|
}
|
||
|
|
var opts = this._formatItems(items);
|
||
|
|
BI.extend(opts[1], {
|
||
|
|
xAxis: o.xAxis,
|
||
|
|
yAxis: o.yAxis
|
||
|
|
});
|
||
|
|
var result = o.formatConfig(opts[1], opts[0]) || opts;
|
||
|
|
this.CombineChart.populate(result[0], result[1]);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.CombineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.CombineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.CombineChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.CombineChart.EVENT_ITEM_CLICK = "EVENT_ITEM_CLICK";
|
||
|
|
BI.shortcut('bi.combine_chart', BI.CombineChart);BI.ChartCombineFormatItemFactory = {
|
||
|
|
combineItems: function (types, items) {
|
||
|
|
var calItems = BI.values(items);
|
||
|
|
return BI.map(calItems, function (idx, item) {
|
||
|
|
return BI.ChartCombineFormatItemFactory.formatItems(types[idx], item);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
formatItems: function (type, items) {
|
||
|
|
var item = {};
|
||
|
|
switch (type) {
|
||
|
|
case BICst.WIDGET.BAR:
|
||
|
|
case BICst.WIDGET.ACCUMULATE_BAR:
|
||
|
|
case BICst.WIDGET.COMPARE_BAR:
|
||
|
|
item = BI.extend({"type": "bar"}, items);
|
||
|
|
break;
|
||
|
|
case BICst.WIDGET.BUBBLE:
|
||
|
|
item = BI.extend({"type": "bubble"}, items);
|
||
|
|
break;
|
||
|
|
case BICst.WIDGET.FORCE_BUBBLE:
|
||
|
|
item = BI.extend({"type": "forceBubble"}, items);
|
||
|
|
break;
|
||
|
|
case BICst.WIDGET.SCATTER:
|
||
|
|
item = BI.extend({"type": "scatter"}, items);
|
||
|
|
break;
|
||
|
|
case BICst.WIDGET.AXIS:
|
||
|
|
case BICst.WIDGET.ACCUMULATE_AXIS:
|
||
|
|
case BICst.WIDGET.PERCENT_ACCUMULATE_AXIS:
|
||
|
|
case BICst.WIDGET.COMPARE_AXIS:
|
||
|
|
case BICst.WIDGET.FALL_AXIS:
|
||
|
|
item = BI.extend({"type": "column"}, items);
|
||
|
|
break;
|
||
|
|
case BICst.WIDGET.LINE:
|
||
|
|
item = BI.extend({"type": "line"}, items);
|
||
|
|
break;
|
||
|
|
case BICst.WIDGET.AREA:
|
||
|
|
case BICst.WIDGET.ACCUMULATE_AREA:
|
||
|
|
case BICst.WIDGET.COMPARE_AREA:
|
||
|
|
case BICst.WIDGET.RANGE_AREA:
|
||
|
|
case BICst.WIDGET.PERCENT_ACCUMULATE_AREA:
|
||
|
|
item = BI.extend({"type": "area"}, items);
|
||
|
|
break;
|
||
|
|
case BICst.WIDGET.DONUT:
|
||
|
|
item = BI.extend({"type": "pie"}, items);
|
||
|
|
break;
|
||
|
|
case BICst.WIDGET.RADAR:
|
||
|
|
case BICst.WIDGET.ACCUMULATE_RADAR:
|
||
|
|
item = BI.extend({"type": "radar"}, items);
|
||
|
|
break;
|
||
|
|
case BICst.WIDGET.PIE:
|
||
|
|
item = BI.extend({"type": "pie"}, items);
|
||
|
|
break;
|
||
|
|
case BICst.WIDGET.DASHBOARD:
|
||
|
|
item = BI.extend({"type": "gauge"}, items);
|
||
|
|
break;
|
||
|
|
case BICst.WIDGET.MAP:
|
||
|
|
item = BI.extend({"type": "areaMap"}, items);
|
||
|
|
break;
|
||
|
|
case BICst.WIDGET.GIS_MAP:
|
||
|
|
item = BI.extend({"type": "pointMap"}, items);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
item = BI.extend({"type": "column"}, items);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return item;
|
||
|
|
},
|
||
|
|
|
||
|
|
combineConfig: function () {
|
||
|
|
return {
|
||
|
|
"title": "",
|
||
|
|
"chartType": "column",
|
||
|
|
"plotOptions": {
|
||
|
|
"rotatable": false,
|
||
|
|
"startAngle": 0,
|
||
|
|
"borderRadius": 0,
|
||
|
|
"endAngle": 360,
|
||
|
|
"innerRadius": "0.0%",
|
||
|
|
"layout": "horizontal",
|
||
|
|
"hinge": "rgb(101,107,109)",
|
||
|
|
"dataLabels": {
|
||
|
|
"autoAdjust": true,
|
||
|
|
"style": {"fontFamily": "inherit", "color": "inherit", "fontSize": "12px"},
|
||
|
|
"formatter": {
|
||
|
|
"identifier": "${VALUE}",
|
||
|
|
"valueFormat": this._contentFormat2Decimal,
|
||
|
|
"seriesFormat": this._contentFormat,
|
||
|
|
"percentFormat": this._contentFormatPercentage,
|
||
|
|
"categoryFormat": this._contentFormat,
|
||
|
|
"XFormat": this._contentFormat2Decimal,
|
||
|
|
"YFormat": this._contentFormat2Decimal,
|
||
|
|
"sizeFormat": this._contentFormat2Decimal
|
||
|
|
},
|
||
|
|
"align": "outside",
|
||
|
|
"enabled": false
|
||
|
|
},
|
||
|
|
"percentageLabel": {
|
||
|
|
"formatter": {
|
||
|
|
"identifier": "${PERCENT}",
|
||
|
|
"valueFormat": this._contentFormat2Decimal,
|
||
|
|
"seriesFormat": this._contentFormat,
|
||
|
|
"percentFormat": this._contentFormatPercentage,
|
||
|
|
"categoryFormat": this._contentFormat
|
||
|
|
},
|
||
|
|
"style": {
|
||
|
|
"fontFamily": "inherit", "color": "inherit", "fontSize": "12px"
|
||
|
|
},
|
||
|
|
"align": "bottom",
|
||
|
|
"enabled": true
|
||
|
|
},
|
||
|
|
"valueLabel": {
|
||
|
|
"formatter": {
|
||
|
|
"identifier": "${SERIES}${VALUE}",
|
||
|
|
"valueFormat": this._contentFormat2Decimal,
|
||
|
|
"seriesFormat": this._contentFormat,
|
||
|
|
"percentFormat": this._contentFormatPercentage,
|
||
|
|
"categoryFormat": this._contentFormat
|
||
|
|
},
|
||
|
|
"backgroundColor": "rgb(255,255,0)",
|
||
|
|
"style": {
|
||
|
|
"fontFamily": "inherit", "color": "inherit", "fontSize": "12px"
|
||
|
|
},
|
||
|
|
"align": "inside",
|
||
|
|
"enabled": true
|
||
|
|
},
|
||
|
|
"hingeBackgroundColor": "rgb(220,242,249)",
|
||
|
|
"seriesLabel": {
|
||
|
|
"formatter": {
|
||
|
|
"identifier": "${CATEGORY}",
|
||
|
|
"valueFormat": this._contentFormat2Decimal,
|
||
|
|
"seriesFormat": this._contentFormat,
|
||
|
|
"percentFormat": this._contentFormatPercentage,
|
||
|
|
"categoryFormat": this._contentFormat
|
||
|
|
},
|
||
|
|
"style": {
|
||
|
|
"fontFamily": "inherit", "color": "inherit", "fontSize": "12px"
|
||
|
|
},
|
||
|
|
"align": "bottom",
|
||
|
|
"enabled": true
|
||
|
|
},
|
||
|
|
"paneBackgroundColor": "rgb(252,252,252)",
|
||
|
|
"needle": "rgb(229,113,90)",
|
||
|
|
"large": false,
|
||
|
|
"connectNulls": false,
|
||
|
|
"shadow": true,
|
||
|
|
"curve": false,
|
||
|
|
"sizeBy": "area",
|
||
|
|
"tooltip": {
|
||
|
|
"formatter": {
|
||
|
|
"identifier": "${SERIES}${X}${Y}${SIZE}{CATEGORY}${SERIES}${VALUE}",
|
||
|
|
"valueFormat": this._contentFormat2Decimal,
|
||
|
|
"seriesFormat": this._contentFormat,
|
||
|
|
"percentFormat": this._contentFormatPercentage,
|
||
|
|
"categoryFormat": this._contentFormat,
|
||
|
|
"XFormat": this._contentFormat2Decimal,
|
||
|
|
"sizeFormat": this._contentFormat2Decimal,
|
||
|
|
"YFormat": this._contentFormat2Decimal
|
||
|
|
},
|
||
|
|
"shared": false,
|
||
|
|
"padding": 5,
|
||
|
|
"backgroundColor": "rgba(0,0,0,0.4980392156862745)",
|
||
|
|
"borderColor": "rgb(0,0,0)",
|
||
|
|
"shadow": false,
|
||
|
|
"borderRadius": 2,
|
||
|
|
"borderWidth": 0,
|
||
|
|
"follow": false,
|
||
|
|
"enabled": true,
|
||
|
|
"animation": true,
|
||
|
|
"style": {
|
||
|
|
"fontFamily": "Microsoft YaHei, Hiragino Sans GB W3",
|
||
|
|
"color": "#c4c6c6",
|
||
|
|
"fontSize": "12px",
|
||
|
|
"fontWeight": ""
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"maxSize": 80,
|
||
|
|
"fillColorOpacity": 0.5,
|
||
|
|
"step": false,
|
||
|
|
"force": false,
|
||
|
|
"minSize": 15,
|
||
|
|
"displayNegative": true,
|
||
|
|
"categoryGap": "16.0%",
|
||
|
|
"borderColor": "rgb(255,255,255)",
|
||
|
|
"borderWidth": 1,
|
||
|
|
"gap": "22.0%",
|
||
|
|
"animation": true,
|
||
|
|
"lineWidth": 2,
|
||
|
|
"bubble": {
|
||
|
|
"large": false,
|
||
|
|
"connectNulls": false,
|
||
|
|
"shadow": true,
|
||
|
|
"curve": false,
|
||
|
|
"sizeBy": "area",
|
||
|
|
"maxSize": 80,
|
||
|
|
"minSize": 15,
|
||
|
|
"lineWidth": 0,
|
||
|
|
"animation": true,
|
||
|
|
"fillColorOpacity": 0.699999988079071,
|
||
|
|
"marker": {
|
||
|
|
"symbol": "circle",
|
||
|
|
"radius": 28.39695010101295,
|
||
|
|
"enabled": true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"dTools": {
|
||
|
|
"enabled": false,
|
||
|
|
"style": {
|
||
|
|
"fontFamily": "Microsoft YaHei, Hiragino Sans GB W3",
|
||
|
|
"color": "#1a1a1a",
|
||
|
|
"fontSize": "12px"
|
||
|
|
},
|
||
|
|
"backgroundColor": 'white'
|
||
|
|
},
|
||
|
|
"dataSheet": {
|
||
|
|
"enabled": false,
|
||
|
|
"borderColor": "rgb(0,0,0)",
|
||
|
|
"borderWidth": 1,
|
||
|
|
"formatter": this._contentFormat2Decimal,
|
||
|
|
"style": {
|
||
|
|
"fontFamily": "inherit", "color": "inherit", "fontSize": "12px"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"borderColor": "rgb(238,238,238)",
|
||
|
|
"shadow": false,
|
||
|
|
"legend": {
|
||
|
|
"borderColor": "rgb(204,204,204)",
|
||
|
|
"borderRadius": 0,
|
||
|
|
"shadow": false,
|
||
|
|
"borderWidth": 0,
|
||
|
|
"visible": true,
|
||
|
|
"style": {
|
||
|
|
"fontFamily": "inherit", "color": "inherit", "fontSize": "12px"
|
||
|
|
},
|
||
|
|
"position": "right",
|
||
|
|
"enabled": false
|
||
|
|
},
|
||
|
|
"rangeLegend": {
|
||
|
|
"range": {
|
||
|
|
"min": 0,
|
||
|
|
"color": [
|
||
|
|
[
|
||
|
|
0,
|
||
|
|
"rgb(182,226,255)"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
0.5,
|
||
|
|
"rgb(109,196,255)"
|
||
|
|
],
|
||
|
|
[
|
||
|
|
1,
|
||
|
|
"rgb(36,167,255)"
|
||
|
|
]
|
||
|
|
],
|
||
|
|
"max": 266393
|
||
|
|
},
|
||
|
|
"enabled": false
|
||
|
|
},
|
||
|
|
"zoom": {"zoomType": "xy", "zoomTool": {"visible": false, "resize": true, "from": "", "to": ""}},
|
||
|
|
"plotBorderColor": "rgba(255,255,255,0)",
|
||
|
|
"tools": {
|
||
|
|
"hidden": false,
|
||
|
|
"toImage": {"enabled": false},
|
||
|
|
"sort": {"enabled": false},
|
||
|
|
"fullScreen": {"enabled": false},
|
||
|
|
"refresh": {
|
||
|
|
"enabled": false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"plotBorderWidth": 0,
|
||
|
|
"style": "normal",
|
||
|
|
"colors": ["rgb(99,178,238)", "rgb(118,218,145)"],
|
||
|
|
"borderRadius": 0,
|
||
|
|
"borderWidth": 0,
|
||
|
|
"plotShadow": false,
|
||
|
|
"plotBorderRadius": 0
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
_contentFormat: function () {
|
||
|
|
return BI.contentFormat(arguments[0], '')
|
||
|
|
},
|
||
|
|
|
||
|
|
_contentFormat2Decimal: function () {
|
||
|
|
return BI.contentFormat(arguments[0], '#.##;-#.##')
|
||
|
|
},
|
||
|
|
|
||
|
|
_contentFormatPercentage: function () {
|
||
|
|
return BI.contentFormat(arguments[0], '#.##%;-#.##%')
|
||
|
|
}
|
||
|
|
};/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.AbstractChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.AbstractChart = BI.inherit(BI.Widget, {
|
||
|
|
|
||
|
|
constants: {
|
||
|
|
LEFT_AXIS: 0,
|
||
|
|
RIGHT_AXIS: 1,
|
||
|
|
RIGHT_AXIS_SECOND: 2,
|
||
|
|
X_AXIS: 3,
|
||
|
|
ROTATION: -90,
|
||
|
|
NORMAL: 1,
|
||
|
|
LEGEND_BOTTOM: 4,
|
||
|
|
ZERO2POINT: 2,
|
||
|
|
ONE2POINT: 3,
|
||
|
|
TWO2POINT: 4,
|
||
|
|
MINLIMIT: 1e-5,
|
||
|
|
LEGEND_HEIGHT: 80,
|
||
|
|
LEGEND_WIDTH: "30.0%",
|
||
|
|
FIX_COUNT: 6,
|
||
|
|
STYLE_NORMAL: 21,
|
||
|
|
NO_PROJECT: 16,
|
||
|
|
DASHBOARD_AXIS: 4,
|
||
|
|
ONE_POINTER: 1,
|
||
|
|
MULTI_POINTER: 2,
|
||
|
|
HALF_DASHBOARD: 9,
|
||
|
|
PERCENT_DASHBOARD: 10,
|
||
|
|
PERCENT_SCALE_SLOT: 11,
|
||
|
|
VERTICAL_TUBE: 12,
|
||
|
|
HORIZONTAL_TUBE: 13,
|
||
|
|
LNG_FIRST: 3,
|
||
|
|
LAT_FIRST: 4,
|
||
|
|
themeColor: "#65bce7",
|
||
|
|
autoCustom: 1,
|
||
|
|
POLYGON: 7,
|
||
|
|
AUTO_CUSTOM: 1,
|
||
|
|
AUTO: 1,
|
||
|
|
NOT_SHOW: 2,
|
||
|
|
LINE_WIDTH: 1,
|
||
|
|
NUM_SEPARATORS: false,
|
||
|
|
FONT_STYLE: {
|
||
|
|
"fontFamily": "inherit",
|
||
|
|
"color": "inherit",
|
||
|
|
"fontSize": "12px"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.AbstractChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-abstract-chart",
|
||
|
|
popupItemsGetter: BI.emptyFn
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.AbstractChart.superclass._init.apply(this, arguments);
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 格式化坐标轴数量级及其所影响的系列的各项属性
|
||
|
|
* @param config 配置信息
|
||
|
|
* @param items 系列数据
|
||
|
|
* @param type 坐标轴数量级
|
||
|
|
* @param position 坐标轴位置
|
||
|
|
* @param formatter 系列tooltip格式化内容
|
||
|
|
*/
|
||
|
|
formatNumberLevelInYaxis: function (config, items, type, position, formatter, isPercentChart) {
|
||
|
|
var magnify = this.calcMagnify(type);
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
if (position === item.yAxis) {
|
||
|
|
if (BI.isNotNull(da.y) && !BI.isNumber(da.y)) {
|
||
|
|
da.y = BI.parseFloat(da.y);
|
||
|
|
}
|
||
|
|
if (BI.isNotNull(da.y)) {
|
||
|
|
da.y = BI.contentFormat(BI.parseFloat(da.y.div(magnify).toFixed(4)), "#.####;-#.####");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (position === item.yAxis) {
|
||
|
|
item.tooltip = BI.deepClone(config.plotOptions.tooltip);
|
||
|
|
item.tooltip.formatter.valueFormat = formatter;
|
||
|
|
if(isPercentChart) {
|
||
|
|
item.tooltip.formatter.percentFormat = formatter;
|
||
|
|
item.tooltip.formatter.identifier = "${CATEGORY}${SERIES}${PERCENT}";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
formatNumberLevelInXaxis: function (items, type) {
|
||
|
|
var magnify = this.calcMagnify(type);
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
if (BI.isNotNull(da.x) && !BI.isNumber(da.x)) {
|
||
|
|
da.x = BI.parseFloat(da.x);
|
||
|
|
}
|
||
|
|
if (BI.isNotNull(da.x)) {
|
||
|
|
da.x = BI.contentFormat(BI.parseFloat(da.x.div(magnify).toFixed(4)), "#.####;-#.####");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
formatXYDataWithMagnify: function (number, magnify) {
|
||
|
|
if (BI.isNull(number)) {
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
if (!BI.isNumber(number)) {
|
||
|
|
number = BI.parseFloat(number);
|
||
|
|
}
|
||
|
|
return BI.contentFormat(BI.parseFloat(number.div(magnify).toFixed(4)), "#.####;-#.####");
|
||
|
|
},
|
||
|
|
|
||
|
|
calcMagnify: function (type) {
|
||
|
|
var magnify = 1;
|
||
|
|
switch (type) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.PERCENT:
|
||
|
|
magnify = 1;
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
magnify = 10000;
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
magnify = 1000000;
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
magnify = 100000000;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return magnify;
|
||
|
|
},
|
||
|
|
|
||
|
|
formatChartLegend: function (config, chartLegend) {
|
||
|
|
switch (chartLegend) {
|
||
|
|
case BICst.CHART_LEGENDS.BOTTOM:
|
||
|
|
config.legend.enabled = true;
|
||
|
|
config.legend.position = "bottom";
|
||
|
|
config.legend.maxHeight = this.constants.LEGEND_HEIGHT;
|
||
|
|
break;
|
||
|
|
case BICst.CHART_LEGENDS.RIGHT:
|
||
|
|
config.legend.enabled = true;
|
||
|
|
config.legend.position = "right";
|
||
|
|
config.legend.maxWidth = this.constants.LEGEND_WIDTH;
|
||
|
|
break;
|
||
|
|
case BICst.CHART_LEGENDS.NOT_SHOW:
|
||
|
|
default:
|
||
|
|
config.legend.enabled = false;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
getXYAxisUnit: function (numberLevelType, axis_unit) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return (BI.isEmptyString(unit) && BI.isEmptyString(axis_unit)) ? unit : "(" + unit + axis_unit + ")";
|
||
|
|
},
|
||
|
|
|
||
|
|
formatTickInXYaxis: function (type, number_level, separators, isCompareBar) {
|
||
|
|
var formatter = '#.##';
|
||
|
|
switch (type) {
|
||
|
|
case this.constants.NORMAL:
|
||
|
|
formatter = '#.##';
|
||
|
|
if (separators) {
|
||
|
|
formatter = '#,###.##'
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case this.constants.ZERO2POINT:
|
||
|
|
formatter = '#0';
|
||
|
|
if (separators) {
|
||
|
|
formatter = '#,###';
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case this.constants.ONE2POINT:
|
||
|
|
formatter = '#0.0';
|
||
|
|
if (separators) {
|
||
|
|
formatter = '#,###.0';
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case this.constants.TWO2POINT:
|
||
|
|
formatter = '#0.00';
|
||
|
|
if (separators) {
|
||
|
|
formatter = '#,###.00';
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (number_level === BICst.TARGET_STYLE.NUM_LEVEL.PERCENT) {
|
||
|
|
formatter += '%';
|
||
|
|
}
|
||
|
|
formatter += ";-" + formatter;
|
||
|
|
if(isCompareBar) {
|
||
|
|
return function () {
|
||
|
|
arguments[0] = arguments[0] > 0 ? arguments[0] : (-1) * arguments[0];
|
||
|
|
return BI.contentFormat(arguments[0], formatter);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return function () {
|
||
|
|
return BI.contentFormat(arguments[0], formatter)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
formatDataLabel: function (state, items, config, style) {
|
||
|
|
var self = this;
|
||
|
|
if (state === true) {
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
item.dataLabels = {
|
||
|
|
"align": "outside",
|
||
|
|
"autoAdjust": true,
|
||
|
|
style: style,
|
||
|
|
enabled: true,
|
||
|
|
formatter: {
|
||
|
|
identifier: "${VALUE}",
|
||
|
|
valueFormat: config.yAxis[item.yAxis].formatter
|
||
|
|
}
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
formatDataLabelForAxis: function (state, items, format, style, isPercentChart) {
|
||
|
|
var self = this;
|
||
|
|
if (state === true) {
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
item.dataLabels = {
|
||
|
|
"align": "outside",
|
||
|
|
"autoAdjust": true,
|
||
|
|
style: style,
|
||
|
|
enabled: true,
|
||
|
|
formatter: {
|
||
|
|
identifier: "${VALUE}",
|
||
|
|
valueFormat: format,
|
||
|
|
}
|
||
|
|
};
|
||
|
|
if(isPercentChart) {
|
||
|
|
item.dataLabels.formatter.identifier = "${PERCENT}";
|
||
|
|
item.dataLabels.formatter.percentFormat = format;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setFontStyle: function (fontStyle, config) {
|
||
|
|
if (config.dataSheet) {
|
||
|
|
config.dataSheet.style = fontStyle;
|
||
|
|
}
|
||
|
|
config.xAxis[0].title.style = fontStyle;
|
||
|
|
config.xAxis[0].labelStyle = fontStyle;
|
||
|
|
config.legend.style = fontStyle;
|
||
|
|
BI.each(config.yAxis, function (idx, axis) {
|
||
|
|
axis.labelStyle = fontStyle;
|
||
|
|
axis.title.style = fontStyle;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (items) {
|
||
|
|
return items;
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
BI.AbstractChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.AbstractChart.EVENT_ITEM_CLICK = "EVENT_ITEM_CLICK";
|
||
|
|
/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.AccumulateAreaChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.AccumulateAreaChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.AccumulateAreaChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-accumulate-area-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.AccumulateAreaChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE
|
||
|
|
}];
|
||
|
|
this.yAxis = [];
|
||
|
|
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.AccumulateAreaChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle(this.config.chartStyle);
|
||
|
|
formatChartLineStyle(this.config.chartLineType);
|
||
|
|
formatCordon(this.config.cordon);
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.connectNulls = this.config.nullContinue;
|
||
|
|
config.dataSheet.enabled = this.config.showDataTable;
|
||
|
|
config.xAxis[0].showLabel = !config.dataSheet.enabled;
|
||
|
|
config.zoom.zoomTool.enabled = this.config.showZoom;
|
||
|
|
if (this.config.showZoom === true) {
|
||
|
|
delete config.dataSheet;
|
||
|
|
delete config.zoom.zoomType;
|
||
|
|
}
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
BI.each(config.yAxis, function (idx, axis) {
|
||
|
|
var unit = "";
|
||
|
|
switch (axis.axisIndex) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
unit = self.getXYAxisUnit(self.config.leftYAxisNumberLevel, self.config.leftYAxisUnit);
|
||
|
|
axis.title.text = self.config.showLeftYAxisTitle === true ? self.config.leftYAxisTitle + unit : unit;
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.leftYAxisReversed,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.leftYAxisStyle, self.config.leftYAxisNumberLevel, self.config.numSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.leftYAxisNumberLevel, idx, axis.formatter, self.config.numSeparators);
|
||
|
|
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
unit = self.getXYAxisUnit(self.config.rightYAxisNumberLevel, self.config.rightYAxisUnit);
|
||
|
|
axis.title.text = self.config.showRightYAxisTitle === true ? self.config.rightYAxisTitle + unit : unit;
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.rightYAxisReversed,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.rightYAxisStyle, self.config.rightYAxisNumberLevel, self.config.rightNumSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.rightYAxisNumberLevel, idx, axis.formatter, self.config.rightNumSeparators);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
config.xAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle : "";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
maxHeight: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
config.chartType = "area";
|
||
|
|
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabel(config.plotOptions.dataLabels.enabled, items, config, this.config.chartFont);
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
this.setFontStyle(this.config.chartFont, config);
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle(v) {
|
||
|
|
switch (v) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatChartLineStyle(v) {
|
||
|
|
switch (v) {
|
||
|
|
case BICst.CHART_SHAPE.RIGHT_ANGLE:
|
||
|
|
config.plotOptions.curve = false;
|
||
|
|
config.plotOptions.step = true;
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.CURVE:
|
||
|
|
config.plotOptions.curve = true;
|
||
|
|
config.plotOptions.step = false;
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.NORMAL:
|
||
|
|
default:
|
||
|
|
config.plotOptions.curve = false;
|
||
|
|
config.plotOptions.step = false;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCordon(cordon) {
|
||
|
|
BI.each(cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
var magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (items) {
|
||
|
|
return BI.map(items, function (idx, item) {
|
||
|
|
var i = BI.UUID();
|
||
|
|
return BI.map(item, function (id, it) {
|
||
|
|
return BI.extend({}, it, {stack: i});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
rightYAxisTitle: options.rightYAxisTitle || "",
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.STYLE_NORMAL,
|
||
|
|
chartLineType: options.chartLineType || c.NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
rightYAxisStyle: options.rightYAxisStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
showRightYAxisTitle: options.showRightYAxisTitle || false,
|
||
|
|
leftYAxisReversed: options.leftYAxisReversed || false,
|
||
|
|
rightYAxisReversed: options.rightYAxisReversed || false,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
rightYAxisNumberLevel: options.rightYAxisNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
rightYAxisUnit: options.rightYAxisUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showDataTable: options.showDataTable || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
showZoom: options.showZoom || false,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
rightNumSeparators: options.rightNumSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE,
|
||
|
|
nullContinue: options.nullContinue || false
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
this.yAxis = [];
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.AREA);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
BI.each(types, function (idx, type) {
|
||
|
|
if (BI.isEmptyArray(type)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var newYAxis = {
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: self.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: self.constants.FONT_STYLE,
|
||
|
|
position: idx > 0 ? "right" : "left",
|
||
|
|
lineWidth: 1,
|
||
|
|
axisIndex: idx,
|
||
|
|
gridLineWidth: 0
|
||
|
|
};
|
||
|
|
self.yAxis.push(newYAxis);
|
||
|
|
});
|
||
|
|
this.combineChart.populate(this._formatItems(items), types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.AccumulateAreaChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.accumulate_area_chart', BI.AccumulateAreaChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.AccumulateAxisChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.AccumulateAxisChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.AccumulateAxisChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-accumulate-axis-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.AccumulateAxisChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE
|
||
|
|
}];
|
||
|
|
this.yAxis = [];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.AccumulateAxisChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this, o = this.options;
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.dataSheet.enabled = this.config.showDataTable;
|
||
|
|
config.xAxis[0].showLabel = !config.dataSheet.enabled;
|
||
|
|
config.zoom.zoomTool.enabled = this.config.showZoom;
|
||
|
|
if (this.config.showZoom === true) {
|
||
|
|
delete config.dataSheet;
|
||
|
|
delete config.zoom.zoomType;
|
||
|
|
}
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
BI.each(config.yAxis, function (idx, axis) {
|
||
|
|
switch (axis.axisIndex) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
axis.title.text = getTitleText(self.config.leftYAxisNumberLevel, self.constants.LEFT_AXIS, self.config.showLeftYAxisTitle, self.config.leftYAxisTitle);
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.leftYAxisReversed,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.leftYAxisStyle, self.config.leftYAxisNumberLevel, self.config.numSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.leftYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
axis.title.text = getTitleText(self.config.rightYAxisNumberLevel, self.constants.RIGHT_AXIS, self.config.showRightYAxisTitle, self.config.rightYAxisTitle);
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.rightYAxisReversed,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.rightYAxisStyle, self.config.rightYAxisNumberLevel, self.config.rightNumSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.rightYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
config.xAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle : "";
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
maxHeight: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
config.chartType = "column";
|
||
|
|
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabel(config.plotOptions.dataLabels.enabled, items, config, this.config.chartFont);
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
this.setFontStyle(this.config.chartFont, config);
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatCordon() {
|
||
|
|
BI.each(self.config.cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
var magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatChartStyle() {
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function getTitleText(numberLevelType, position, show, title) {
|
||
|
|
var unit = "";
|
||
|
|
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.X_AXIS) {
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.LEFT_AXIS) {
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.RIGHT_AXIS) {
|
||
|
|
self.config.rightYAxisUnit !== "" && (unit = unit + self.config.rightYAxisUnit)
|
||
|
|
}
|
||
|
|
|
||
|
|
unit = unit === "" ? unit : "(" + unit + ")";
|
||
|
|
|
||
|
|
return show === true ? title + unit : unit;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (items) {
|
||
|
|
return BI.map(items, function (idx, item) {
|
||
|
|
var i = BI.UUID();
|
||
|
|
return BI.map(item, function (id, it) {
|
||
|
|
return BI.extend({}, it, {stack: i});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
rightYAxisTitle: options.rightYAxisTitle || "",
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.STYLE_NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
rightYAxisStyle: options.rightYAxisStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
showRightYAxisTitle: options.showRightYAxisTitle || false,
|
||
|
|
leftYAxisReversed: options.leftYAxisReversed || false,
|
||
|
|
rightYAxisReversed: options.rightYAxisReversed || false,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
rightYAxisNumberLevel: options.rightYAxisNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
rightYAxisUnit: options.rightYAxisUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showDataTable: options.showDataTable || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
showZoom: options.showZoom || false,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
rightNumSeparators: options.rightNumSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
this.yAxis = [];
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.AXIS);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
BI.each(types, function (idx, type) {
|
||
|
|
if (BI.isEmptyArray(type)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var newYAxis = {
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: self.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: self.constants.FONT_STYLE,
|
||
|
|
position: idx > 0 ? "right" : "left",
|
||
|
|
lineWidth: 1,
|
||
|
|
axisIndex: idx,
|
||
|
|
gridLineWidth: 0
|
||
|
|
};
|
||
|
|
self.yAxis.push(newYAxis);
|
||
|
|
});
|
||
|
|
this.combineChart.populate(this._formatItems(items), types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.AccumulateAxisChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.accumulate_axis_chart', BI.AccumulateAxisChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.AccumulateBarChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.AccumulateBarChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.AccumulateBarChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-accumulate-bar-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.AccumulateBarChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
formatter: function () {
|
||
|
|
return this > 0 ? this : (-1) * this
|
||
|
|
},
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.yAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
gridLineWidth: 0,
|
||
|
|
position: "left"
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.AccumulateBarChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this;
|
||
|
|
var unit = getXYAxisUnit(this.config.xAxisNumberLevel, this.constants.LEFT_AXIS);
|
||
|
|
var xTitle = getXYAxisUnit(this.config.leftYAxisNumberLevel, this.constants.X_AXIS);
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
config.yAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle + unit : unit;
|
||
|
|
config.yAxis[0].title.rotation = this.constants.ROTATION;
|
||
|
|
BI.extend(config.yAxis[0], {
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
maxWidth: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
self.formatNumberLevelInXaxis(items, this.config.leftYAxisNumberLevel);
|
||
|
|
config.xAxis[0].title.text = this.config.showLeftYAxisTitle === true ? this.config.leftYAxisTitle + xTitle : xTitle;
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
formatter: self.formatTickInXYaxis(this.config.leftYAxisStyle, self.config.leftYAxisNumberLevel, self.config.numSeparators),
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
showLabel: this.config.showLabel,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableMinorTick: this.config.enableMinorTick
|
||
|
|
});
|
||
|
|
config.chartType = "bar";
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabelForAxis(config.plotOptions.dataLabels.enabled, items, config.xAxis[0].formatter, this.config.chartFont);
|
||
|
|
|
||
|
|
config.plotOptions.tooltip.formatter.valueFormat = config.xAxis[0].formatter;
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
this.setFontStyle(this.config.chartFont, config);
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle() {
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCordon() {
|
||
|
|
BI.each(self.config.cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
var magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.X_AXIS) {
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.LEFT_AXIS) {
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.RIGHT_AXIS) {
|
||
|
|
self.config.rightYAxisUnit !== "" && (unit = unit + self.config.rightYAxisUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (items) {
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
var stackId = BI.UUID();
|
||
|
|
BI.each(item, function (id, it) {
|
||
|
|
it.stack = stackId;
|
||
|
|
BI.each(it.data, function (i, t) {
|
||
|
|
var tmp = t.x;
|
||
|
|
t.x = t.y;
|
||
|
|
t.y = tmp;
|
||
|
|
})
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return items;
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.STYLE_NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
xAxisStyle: options.xAxisStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
leftYAxisReversed: options.leftYAxisReversed || false,
|
||
|
|
xAxisNumberLevel: options.xAxisNumberLevel || c.NORMAL,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showDataTable: options.showDataTable || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
showZoom: options.showZoom || false,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
minimalist_model: options.minimalist_model || false,
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.BAR);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
this.combineChart.populate(this._formatItems(items), types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.AccumulateBarChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.accumulate_bar_chart', BI.AccumulateBarChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.AccumulateRadarChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.AccumulateRadarChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.AccumulateRadarChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-accumulate-radar-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.AccumulateRadarChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.radiusAxis = [{
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
formatter: function () {
|
||
|
|
return this > 0 ? this : (-1) * this
|
||
|
|
},
|
||
|
|
gridLineWidth: 0,
|
||
|
|
position: "bottom"
|
||
|
|
}];
|
||
|
|
|
||
|
|
this.angleAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE
|
||
|
|
}];
|
||
|
|
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.AccumulateRadarChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (items) {
|
||
|
|
return BI.map(items, function (idx, item) {
|
||
|
|
var i = BI.UUID();
|
||
|
|
return BI.map(item, function (id, it) {
|
||
|
|
return BI.extend({}, it, {stack: i});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
delete config.zoom;
|
||
|
|
|
||
|
|
var title = getXYAxisUnit(this.config.leftYAxisNumberLevel, this.constants.LEFT_AXIS);
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatChartRadarStyle();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.connectNulls = this.config.nullContinue;
|
||
|
|
|
||
|
|
config.radiusAxis = this.radiusAxis;
|
||
|
|
config.angleAxis = this.angleAxis;
|
||
|
|
config.radiusAxis[0].formatter = self.formatTickInXYaxis(this.config.leftYAxisStyle, this.config.leftYAxisNumberLevel, this.config.numSeparators);
|
||
|
|
formatNumberLevelInYaxis(this.config.leftYAxisNumberLevel, this.constants.LEFT_AXIS, config.radiusAxis[0].formatter);
|
||
|
|
config.radiusAxis[0].title.text = this.config.showLeftYAxisTitle === true ? this.config.leftYAxisTitle + title : title;
|
||
|
|
config.radiusAxis[0].gridLineWidth = this.config.showGridLine === true ? 1 : 0;
|
||
|
|
config.chartType = "radar";
|
||
|
|
config.plotOptions.columnType = true;
|
||
|
|
delete config.xAxis;
|
||
|
|
delete config.yAxis;
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabelForAxis(config.plotOptions.dataLabels.enabled, items, config.radiusAxis[0].formatter, this.config.chartFont);
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
config.radiusAxis[0].labelStyle = config.radiusAxis[0].title.style = this.config.chartFont;
|
||
|
|
config.angleAxis[0].labelStyle = config.angleAxis[0].title.style = this.config.chartFont;
|
||
|
|
config.legend.style = this.config.chartFont;
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle() {
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatChartRadarStyle() {
|
||
|
|
switch (self.config.chartRadarType) {
|
||
|
|
case BICst.CHART_SHAPE.POLYGON:
|
||
|
|
config.plotOptions.shape = "polygon";
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.CIRCLE:
|
||
|
|
config.plotOptions.shape = "circle";
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatNumberLevelInYaxis(type, position, formatter) {
|
||
|
|
var magnify = self.calcMagnify(type);
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
if (position === item.yAxis) {
|
||
|
|
da.y = self.formatXYDataWithMagnify(da.y, magnify);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
});
|
||
|
|
config.plotOptions.tooltip.formatter.valueFormat = formatter;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.X_AXIS) {
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.LEFT_AXIS) {
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.RIGHT_AXIS) {
|
||
|
|
self.config.rightYAxisUnit !== "" && (unit = unit + self.config.rightYAxisUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
chartRadarType: options.chartRadarType || c.NORMAL,
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.STYLE_NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE,
|
||
|
|
nullContinue: options.nullContinue || false
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.RADAR);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
this.combineChart.populate(this._formatItems(items), types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.AccumulateRadarChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.accumulate_radar_chart', BI.AccumulateRadarChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.AreaChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.AreaChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.AreaChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-area-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.AreaChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "bottom",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.AreaChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this;
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatChartLineStyle();
|
||
|
|
formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.connectNulls = this.config.nullContinue;
|
||
|
|
config.dataSheet.enabled = this.config.showDataTable;
|
||
|
|
config.xAxis[0].showLabel = !config.dataSheet.enabled;
|
||
|
|
config.zoom.zoomTool.enabled = this.config.showZoom;
|
||
|
|
if (this.config.showZoom === true) {
|
||
|
|
delete config.dataSheet;
|
||
|
|
delete config.zoom.zoomType;
|
||
|
|
}
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
BI.each(config.yAxis, function (idx, axis) {
|
||
|
|
var title = "";
|
||
|
|
switch (axis.axisIndex) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
title = getXYAxisUnit(self.config.leftYAxisNumberLevel, self.constants.LEFT_AXIS);
|
||
|
|
axis.title.text = self.config.showLeftYAxisTitle === true ? self.config.leftYAxisTitle + title : title;
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.leftYAxisReversed,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.leftYAxisStyle, self.config.leftYAxisNumberLevel, self.config.numSeparators),
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.leftYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
title = getXYAxisUnit(self.config.rightYAxisNumberLevel, self.constants.RIGHT_AXIS);
|
||
|
|
axis.title.text = self.config.showRightYAxisTitle === true ? self.config.rightYAxisTitle + title : title;
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.rightYAxisReversed,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.rightYAxisStyle, self.config.rightYAxisNumberLevel, self.config.rightNumSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.rightYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
config.xAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle : "";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
maxHeight: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
config.chartType = "area";
|
||
|
|
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabel(config.plotOptions.dataLabels.enabled, items, config, this.config.chartFont);
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
this.setFontStyle(this.config.chartFont, config);
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle() {
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCordon() {
|
||
|
|
BI.each(self.config.cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
var magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatChartLineStyle() {
|
||
|
|
switch (self.config.chartLineType) {
|
||
|
|
case BICst.CHART_SHAPE.RIGHT_ANGLE:
|
||
|
|
config.plotOptions.curve = false;
|
||
|
|
config.plotOptions.step = true;
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.CURVE:
|
||
|
|
config.plotOptions.curve = true;
|
||
|
|
config.plotOptions.step = false;
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.NORMAL:
|
||
|
|
default:
|
||
|
|
config.plotOptions.curve = false;
|
||
|
|
config.plotOptions.step = false;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.X_AXIS) {
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.LEFT_AXIS) {
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.RIGHT_AXIS) {
|
||
|
|
self.config.rightYAxisUnit !== "" && (unit = unit + self.config.rightYAxisUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
rightYAxisTitle: options.rightYAxisTitle || "",
|
||
|
|
rightYAxisSecondTitle: options.rightYAxisSecondTitle || "",
|
||
|
|
chartLineType: options.chartLineType || c.NORMAL,
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
rightYAxisStyle: options.rightYAxisStyle || c.NORMAL,
|
||
|
|
rightYAxisSecondStyle: options.rightYAxisSecondStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
showRightYAxisTitle: options.showRightYAxisTitle || false,
|
||
|
|
showRightYAxisSecondTitle: options.showRightYAxisSecondTitle || false,
|
||
|
|
leftYAxisReversed: options.leftYAxisReversed || false,
|
||
|
|
rightYAxisReversed: options.rightYAxisReversed || false,
|
||
|
|
rightYAxisSecondReversed: options.rightYAxisSecondReversed || false,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
rightYAxisNumberLevel: options.rightYAxisNumberLevel || c.NORMAL,
|
||
|
|
rightYAxisSecondNumberLevel: options.rightYAxisSecondNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
rightYAxisUnit: options.rightYAxisUnit || "",
|
||
|
|
rightYAxisSecondUnit: options.rightYAxisSecondUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showDataTable: options.showDataTable || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
showZoom: options.showZoom || false,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
rightNumSeparators: options.rightNumSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE,
|
||
|
|
nullContinue: options.nullContinue || false
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.AREA);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.yAxis = [];
|
||
|
|
BI.each(types, function (idx, type) {
|
||
|
|
if (BI.isEmptyArray(type)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var newYAxis = {
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: self.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: self.constants.FONT_STYLE,
|
||
|
|
position: idx > 0 ? "right" : "left",
|
||
|
|
lineWidth: 1,
|
||
|
|
axisIndex: idx,
|
||
|
|
gridLineWidth: 0
|
||
|
|
};
|
||
|
|
self.yAxis.push(newYAxis);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(items, types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.AreaChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.area_chart', BI.AreaChart);/**
|
||
|
|
* 图表控件 柱状
|
||
|
|
* @class BI.AxisChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
* leftYxis 左值轴属性
|
||
|
|
* rightYxis 右值轴属性
|
||
|
|
* xAxis 分类轴属性
|
||
|
|
*/
|
||
|
|
BI.AxisChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.AxisChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-axis-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.AxisChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "bottom",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.AxisChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this, o = this.options;
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.connectNulls = this.config.nullContinue;
|
||
|
|
config.dataSheet.enabled = this.config.showDataTable;
|
||
|
|
config.xAxis[0].showLabel = !config.dataSheet.enabled;
|
||
|
|
config.zoom.zoomTool.enabled = this.config.showZoom;
|
||
|
|
if (this.config.showZoom === true) {
|
||
|
|
delete config.dataSheet;
|
||
|
|
delete config.zoom.zoomType;
|
||
|
|
}
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
BI.each(config.yAxis, function (idx, axis) {
|
||
|
|
var title;
|
||
|
|
switch (axis.axisIndex) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
title = getXYAxisUnit(self.config.leftYAxisNumberLevel, self.constants.LEFT_AXIS);
|
||
|
|
axis.title.text = self.config.showLeftYAxisTitle === true ? self.config.leftYAxisTitle + title : title;
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.leftYAxisReversed,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.leftYAxisStyle, self.config.leftYAxisNumberLevel, self.config.numSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.leftYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
title = getXYAxisUnit(self.config.rightYAxisNumberLevel, self.constants.RIGHT_AXIS);
|
||
|
|
axis.title.text = self.config.showRightYAxisTitle === true ? self.config.rightYAxisTitle + title : title;
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.rightYAxisReversed,
|
||
|
|
enableMinorTIck: self.config.enableMinorTick,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.rightYAxisStyle, self.config.rightYAxisNumberLevel, self.config.rightNumSeparators),
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.rightYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
config.xAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle : "";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
enableMinorTick: this.config.enableMinorTick,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
maxHeight: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
var lineItem = [];
|
||
|
|
var otherItem = [];
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
if (item.type === "line") {
|
||
|
|
lineItem.push(item);
|
||
|
|
} else {
|
||
|
|
otherItem.push(item);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabel(config.plotOptions.dataLabels.enabled, items, config, this.config.chartFont);
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
this.setFontStyle(this.config.chartFont, config);
|
||
|
|
|
||
|
|
return [BI.concat(otherItem, lineItem), config];
|
||
|
|
|
||
|
|
function formatChartStyle() {
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCordon() {
|
||
|
|
BI.each(self.config.cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
var magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.X_AXIS) {
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.LEFT_AXIS) {
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.RIGHT_AXIS) {
|
||
|
|
self.config.rightYAxisUnit !== "" && (unit = unit + self.config.rightYAxisUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options, types) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
rightYAxisTitle: options.rightYAxisTitle || "",
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
rightYAxisStyle: options.rightYAxisStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
showRightYAxisTitle: options.showRightYAxisTitle || false,
|
||
|
|
leftYAxisReversed: options.leftYAxisReversed || false,
|
||
|
|
rightYAxisReversed: options.rightYAxisReversed || false,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
rightYAxisNumberLevel: options.rightYAxisNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
rightYAxisUnit: options.rightYAxisUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showDataTable: options.showDataTable || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
showZoom: options.showZoom || false,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
rightNumSeparators: options.rightNumSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE,
|
||
|
|
nullContinue: true
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
|
||
|
|
this.yAxis = [];
|
||
|
|
BI.each(types, function (idx, type) {
|
||
|
|
if (BI.isEmptyArray(type)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var newYAxis = {
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: self.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: self.constants.FONT_STYLE,
|
||
|
|
position: idx > 0 ? "right" : "left",
|
||
|
|
lineWidth: 1,
|
||
|
|
axisIndex: idx,
|
||
|
|
gridLineWidth: 0
|
||
|
|
};
|
||
|
|
self.yAxis.push(newYAxis);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(items, types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.AxisChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.axis_chart', BI.AxisChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.BarChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.BarChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.BarChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-bar-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.BarChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
formatter: function () {
|
||
|
|
return this > 0 ? this : (-1) * this
|
||
|
|
},
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.yAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
gridLineWidth: 0,
|
||
|
|
position: "left"
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
var tmp = obj.x;
|
||
|
|
obj.x = obj.y;
|
||
|
|
obj.y = tmp;
|
||
|
|
self.fireEvent(BI.BarChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this;
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
|
||
|
|
//分类轴
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
config.yAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle : "";
|
||
|
|
config.yAxis[0].title.rotation = this.constants.ROTATION;
|
||
|
|
BI.extend(config.yAxis[0], {
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
maxWidth: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
//值轴
|
||
|
|
self.formatNumberLevelInXaxis(items, this.config.leftYAxisNumberLevel);
|
||
|
|
config.xAxis[0].title.text = getXAxisTitle(this.config.leftYAxisNumberLevel, this.constants.X_AXIS);
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
formatter: self.formatTickInXYaxis(this.config.leftYAxisStyle, this.config.leftYAxisNumberLevel, this.config.numSeparators),
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
showLabel: this.config.showLabel,
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableMinorTick: this.config.enableMinorTick
|
||
|
|
});
|
||
|
|
config.chartType = "bar";
|
||
|
|
|
||
|
|
this.formatDataLabelForAxis(config.plotOptions.dataLabels.enabled, items, config.xAxis[0].formatter, this.config.chartFont);
|
||
|
|
|
||
|
|
config.plotOptions.tooltip.formatter.valueFormat = config.xAxis[0].formatter;
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
this.setFontStyle(this.config.chartFont, config);
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle() {
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCordon() {
|
||
|
|
BI.each(self.config.cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
var magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXAxisTitle(numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.X_AXIS) {
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.LEFT_AXIS) {
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
unit = unit === "" ? unit : "(" + unit + ")";
|
||
|
|
|
||
|
|
return self.config.showLeftYAxisTitle === true ? self.config.leftYAxisTitle + unit : unit;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (items) {
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item, function (id, it) {
|
||
|
|
BI.each(it.data, function (i, t) {
|
||
|
|
var tmp = t.x;
|
||
|
|
t.x = t.y;
|
||
|
|
t.y = tmp;
|
||
|
|
})
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return items;
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.STYLE_NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
xAxisStyle: options.xAxisStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
leftYAxisReversed: options.leftYAxisReversed || false,
|
||
|
|
xAxisNumberLevel: options.xAxisNumberLevel || c.NORMAL,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
showZoom: options.showZoom || false,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.BAR);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
this.combineChart.populate(this._formatItems(items), types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.BarChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.bar_chart', BI.BarChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.BubbleChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.BubbleChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.BubbleChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-bubble-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.BubbleChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "bottom",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.yAxis = [{
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "left",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.BubbleChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this, o = this.options;
|
||
|
|
delete config.zoom;
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.dataLabels.formatter.identifier = "${X}${Y}${SIZE}";
|
||
|
|
config.plotOptions.shadow = this.config.bubbleStyle !== this.constants.NO_PROJECT;
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
|
||
|
|
config.yAxis[0].formatter = self.formatTickInXYaxis(this.config.leftYAxisStyle, this.config.leftYAxisNumberLevel, this.config.numSeparators);
|
||
|
|
formatNumberLevelInYaxis(this.config.leftYAxisNumberLevel, this.constants.LEFT_AXIS);
|
||
|
|
config.yAxis[0].title.text = getXYAxisUnit(this.config.leftYAxisNumberLevel, this.constants.LEFT_AXIS);
|
||
|
|
config.yAxis[0].title.text = this.config.showLeftYAxisTitle === true ? this.config.leftYAxisTitle + config.yAxis[0].title.text : config.yAxis[0].title.text;
|
||
|
|
config.yAxis[0].gridLineWidth = this.config.showGridLine === true ? 1 : 0;
|
||
|
|
config.yAxis[0].lineWidth = 1;
|
||
|
|
config.yAxis[0].title.rotation = this.constants.ROTATION;
|
||
|
|
config.yAxis[0].maxWidth = '40%';
|
||
|
|
|
||
|
|
config.xAxis[0].formatter = self.formatTickInXYaxis(this.config.xAxisStyle, this.config.xAxisNumberLevel, this.config.rightNumSeparators);
|
||
|
|
self.formatNumberLevelInXaxis(items, this.config.xAxisNumberLevel);
|
||
|
|
config.xAxis[0].title.text = getXYAxisUnit(this.config.xAxisNumberLevel, this.constants.X_AXIS);
|
||
|
|
config.xAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle + config.xAxis[0].title.text : config.xAxis[0].title.text;
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
config.xAxis[0].gridLineWidth = this.config.showGridLine === true ? 1 : 0;
|
||
|
|
config.xAxis[0].maxHeith = '40%';
|
||
|
|
config.chartType = "bubble";
|
||
|
|
|
||
|
|
if (BI.isNotEmptyArray(this.config.tooltip)) {
|
||
|
|
config.plotOptions.bubble.tooltip = {
|
||
|
|
useHtml: true,
|
||
|
|
style: {
|
||
|
|
color: 'RGB(184, 184, 184)'
|
||
|
|
},
|
||
|
|
formatter: function () {
|
||
|
|
var y = self.formatTickInXYaxis(self.config.leftYAxisStyle, self.config.leftYAxisNumberLevel, self.config.numSeparators)(this.y);
|
||
|
|
var x = self.formatTickInXYaxis(self.config.xAxisStyle, self.config.xAxisNumberLevel, self.config.rightNumSeparators)(this.x);
|
||
|
|
return this.seriesName + '<div>(X)' + self.config.tooltip[0] + ':' + x + '</div><div>(Y)' + self.config.tooltip[1]
|
||
|
|
+ ':' + y + '</div><div>(' + BI.i18nText("BI-Size") + ')' + self.config.tooltip[2] + ':' + this.size + '</div>'}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
if (config.plotOptions.dataLabels.enabled === true) {
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
item.dataLabels = {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"align": "outside",
|
||
|
|
"autoAdjust": true,
|
||
|
|
enabled: true,
|
||
|
|
formatter: {
|
||
|
|
identifier: "${X}${Y}${SIZE}",
|
||
|
|
"XFormat": function () {
|
||
|
|
return BI.contentFormat(arguments[0], '#.##;-#.##')
|
||
|
|
},
|
||
|
|
"YFormat": function () {
|
||
|
|
return BI.contentFormat(arguments[0], '#.##;-#.##')
|
||
|
|
},
|
||
|
|
"sizeFormat": function () {
|
||
|
|
return BI.contentFormat(arguments[0], '#.##;-#.##')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
item.dataLabels.formatter.XFormat = config.xAxis[0].formatter;
|
||
|
|
item.dataLabels.formatter.YFormat = config.yAxis[0].formatter;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//全局样式图表文字
|
||
|
|
config.yAxis[0].title.style = config.yAxis[0].labelStyle = this.config.chartFont;
|
||
|
|
config.xAxis[0].title.style = config.xAxis[0].labelStyle = this.config.chartFont;
|
||
|
|
config.legend.style = this.config.chartFont;
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle() {
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCordon() {
|
||
|
|
BI.each(self.config.cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
var magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatNumberLevelInYaxis(type, position) {
|
||
|
|
var magnify = self.calcMagnify(type);
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
if (position === item.yAxis) {
|
||
|
|
da.y = self.formatXYDataWithMagnify(da.y, magnify);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
});
|
||
|
|
if (type === BICst.TARGET_STYLE.NUM_LEVEL.PERCENT) {
|
||
|
|
//config.plotOptions.tooltip.formatter.valueFormat = "function(){return window.FR ? FR.contentFormat(arguments[0], '#0%') : arguments[0]}";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.X_AXIS) {
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.LEFT_AXIS) {
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.RIGHT_AXIS) {
|
||
|
|
self.config.rightYAxisUnit !== "" && (unit = unit + self.config.rightYAxisUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (items) {
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item, function (id, it) {
|
||
|
|
BI.each(it.data, function (i, da) {
|
||
|
|
var data = da.size;
|
||
|
|
da.size = BI.contentFormat(data, '#.##;-#.##')
|
||
|
|
})
|
||
|
|
})
|
||
|
|
});
|
||
|
|
return items;
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
xAxisStyle: options.xAxisStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
xAxisNumberLevel: options.xAxisNumberLevel || c.NORMAL,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
tooltip: options.tooltip || [],
|
||
|
|
bubbleStyle: options.bubbleStyle || c.NO_PROJECT,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
rightNumSeparators: options.rightNumSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.BUBBLE);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
this.combineChart.populate(this._formatItems(items), types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.BubbleChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.bubble_chart', BI.BubbleChart);
|
||
|
|
/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.CompareAreaChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.CompareAreaChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.CompareAreaChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-compare-area-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.CompareAreaChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "bottom",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.CompareAreaChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this;
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatChartLineStyle();
|
||
|
|
formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.connectNulls = this.config.nullContinue;
|
||
|
|
config.dataSheet.enabled = this.config.showDataTable;
|
||
|
|
config.xAxis[0].showLabel = !config.dataSheet.enabled;
|
||
|
|
config.zoom.zoomTool.enabled = this.config.showZoom;
|
||
|
|
if (this.config.showZoom === true) {
|
||
|
|
delete config.dataSheet;
|
||
|
|
delete config.zoom.zoomType;
|
||
|
|
}
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
BI.each(config.yAxis, function (idx, axis) {
|
||
|
|
var title = "";
|
||
|
|
switch (axis.axisIndex) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
title = getXYAxisUnit(self.config.leftYAxisNumberLevel, self.constants.LEFT_AXIS);
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
axis.title.text = self.config.showLeftYAxisTitle === true ? self.config.leftYAxisTitle + title : title;
|
||
|
|
BI.extend(axis, {
|
||
|
|
reversed: false,
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.leftYAxisStyle, self.config.leftYAxisNumberLevel, self.config.numSeparators)
|
||
|
|
});
|
||
|
|
formatNumberLevelInYaxis(self.config.leftYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
title = getXYAxisUnit(self.config.rightYAxisNumberLevel, self.constants.RIGHT_AXIS);
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
axis.title.text = self.config.showRightYAxisTitle === true ? self.config.rightYAxisTitle + title : title;
|
||
|
|
BI.extend(axis, {
|
||
|
|
reversed: true,
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.rightYAxisStyle, self.config.rightYAxisNumberLevel, self.config.rightNumSeparators)
|
||
|
|
});
|
||
|
|
formatNumberLevelInYaxis(self.config.rightYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
var res = _calculateValueNiceDomain(0, self.maxes[idx]);
|
||
|
|
axis.max = res[1].mul(2);
|
||
|
|
axis.min = res[0].mul(2);
|
||
|
|
axis.tickInterval = BI.parseFloat((BI.parseFloat(axis.max).sub(BI.parseFloat(axis.min)))).div(5);
|
||
|
|
});
|
||
|
|
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
config.xAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle : "";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
maxHeight: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
config.chartType = "area";
|
||
|
|
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabel(config.plotOptions.dataLabels.enabled, items, config, this.config.chartFont);
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
this.setFontStyle(this.config.chartFont, config);
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function _calculateValueNiceDomain(minValue, maxValue) {
|
||
|
|
|
||
|
|
minValue = Math.min(0, minValue);
|
||
|
|
|
||
|
|
var tickInterval = _linearTickInterval(minValue, maxValue);
|
||
|
|
|
||
|
|
return _linearNiceDomain(minValue, maxValue, tickInterval);
|
||
|
|
}
|
||
|
|
|
||
|
|
function _linearTickInterval(minValue, maxValue, m) {
|
||
|
|
|
||
|
|
m = m || 5;
|
||
|
|
var span = maxValue - minValue;
|
||
|
|
var step = Math.pow(10, Math.floor(Math.log(span / m) / Math.LN10));
|
||
|
|
var err = m / span * step;
|
||
|
|
|
||
|
|
if (err <= .15) step *= 10; else if (err <= .35) step *= 5; else if (err <= .75) step *= 2;
|
||
|
|
|
||
|
|
return step;
|
||
|
|
}
|
||
|
|
|
||
|
|
function _linearNiceDomain(minValue, maxValue, tickInterval) {
|
||
|
|
|
||
|
|
minValue = VanUtils.accMul(Math.floor(minValue / tickInterval), tickInterval);
|
||
|
|
|
||
|
|
maxValue = VanUtils.accMul(Math.ceil(maxValue / tickInterval), tickInterval);
|
||
|
|
|
||
|
|
return [minValue, maxValue];
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatChartStyle() {
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCordon() {
|
||
|
|
BI.each(self.config.cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
var magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style": self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style": self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatChartLineStyle() {
|
||
|
|
switch (self.config.chartLineType) {
|
||
|
|
case BICst.CHART_SHAPE.RIGHT_ANGLE:
|
||
|
|
config.plotOptions.area = {
|
||
|
|
curve: false,
|
||
|
|
step: true
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.CURVE:
|
||
|
|
config.plotOptions.area = {
|
||
|
|
curve: true,
|
||
|
|
step: false
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.NORMAL:
|
||
|
|
default:
|
||
|
|
config.plotOptions.area = {
|
||
|
|
curve: false,
|
||
|
|
step: false
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatNumberLevelInYaxis(type, position, formatter) {
|
||
|
|
var magnify = self.calcMagnify(type);
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
var max = null;
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
if (position === item.yAxis) {
|
||
|
|
da.y = self.formatXYDataWithMagnify(da.y, magnify);
|
||
|
|
if ((BI.isNull(max) || BI.parseFloat(da.y) > BI.parseFloat(max))) {
|
||
|
|
max = da.y;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (position === item.yAxis) {
|
||
|
|
item.tooltip = BI.deepClone(config.plotOptions.tooltip);
|
||
|
|
item.tooltip.formatter.valueFormat = formatter;
|
||
|
|
}
|
||
|
|
if (BI.isNotNull(max)) {
|
||
|
|
self.maxes.push(max);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.X_AXIS) {
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.LEFT_AXIS) {
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.RIGHT_AXIS) {
|
||
|
|
self.config.rightYAxisUnit !== "" && (unit = unit + self.config.rightYAxisUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (items) {
|
||
|
|
var self = this;
|
||
|
|
this.maxes = [];
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item, function (id, it) {
|
||
|
|
if (idx > 0) {
|
||
|
|
BI.extend(it, {reversed: true, xAxis: 0});
|
||
|
|
} else {
|
||
|
|
BI.extend(it, {reversed: false, xAxis: 1});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return items;
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
rightYAxisTitle: options.rightYAxisTitle || "",
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.NORMAL,
|
||
|
|
chartLineType: options.chartLineType || c.NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
rightYAxisStyle: options.rightYAxisStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
showRightYAxisTitle: options.showRightYAxisTitle || false,
|
||
|
|
leftYAxisReversed: options.leftYAxisReversed || false,
|
||
|
|
rightYAxisReversed: options.rightYAxisReversed || false,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
rightYAxisNumberLevel: options.rightYAxisNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
rightYAxisUnit: options.rightYAxisUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showDataTable: options.showDataTable || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
showZoom: options.showZoom || false,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
rightNumSeparators: options.rightNumSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE,
|
||
|
|
nullContinue: options.nullContinue || false
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.AREA);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.yAxis = [];
|
||
|
|
BI.each(types, function (idx, type) {
|
||
|
|
if (BI.isEmptyArray(type)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var newYAxis = {
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: self.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: self.constants.FONT_STYLE,
|
||
|
|
position: idx > 0 ? "right" : "left",
|
||
|
|
lineWidth: 1,
|
||
|
|
axisIndex: idx,
|
||
|
|
gridLineWidth: 0
|
||
|
|
};
|
||
|
|
self.yAxis.push(newYAxis);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(this._formatItems(items), types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.CompareAreaChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.compare_area_chart', BI.CompareAreaChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.CompareAxisChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.CompareAxisChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.CompareAxisChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-compare-axis-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.CompareAxisChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "bottom",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}, {
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "top",
|
||
|
|
gridLineWidth: 0,
|
||
|
|
type: "category",
|
||
|
|
showLabel: false
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.CompareAxisChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function(config, items){
|
||
|
|
var self = this, o = this.options;
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatChartLineStyle();
|
||
|
|
formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.dataSheet.enabled = this.config.showDataTable;
|
||
|
|
config.xAxis[0].showLabel = !config.dataSheet.enabled;
|
||
|
|
config.zoom.zoomTool.enabled = this.config.showZoom;
|
||
|
|
if(this.config.showZoom === true){
|
||
|
|
delete config.dataSheet;
|
||
|
|
delete config.zoom.zoomType;
|
||
|
|
}
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
BI.each(config.yAxis, function(idx, axis){
|
||
|
|
var unit = '';
|
||
|
|
switch (axis.axisIndex){
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
unit = getXYAxisUnit(self.config.leftYAxisNumberLevel, self.constants.LEFT_AXIS);
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
axis.title.text = self.config.showLeftYAxisTitle === true ? self.config.leftYAxisTitle + unit : unit;
|
||
|
|
BI.extend(axis, {
|
||
|
|
reversed: false,
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.leftYAxisStyle, self.config.leftYAxisNumberLevel, self.config.numSeparators)
|
||
|
|
});
|
||
|
|
formatNumberLevelInYaxis(self.config.leftYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
unit = getXYAxisUnit(self.config.rightYAxisNumberLevel, self.constants.RIGHT_AXIS);
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
axis.title.text = self.config.showRightYAxisTitle === true ? self.config.rightYAxisTitle + unit : unit;
|
||
|
|
BI.extend(axis, {
|
||
|
|
reversed: true,
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.rightYAxisStyle, self.config.rightYAxisNumberLevel, self.config.rightNumSeparators)
|
||
|
|
});
|
||
|
|
formatNumberLevelInYaxis(self.config.rightYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
var res = _calculateValueNiceDomain(0, self.maxes[idx]);
|
||
|
|
axis.max = res[1].mul(2);
|
||
|
|
axis.min = res[0].mul(2);
|
||
|
|
axis.tickInterval = BI.parseFloat((BI.parseFloat(axis.max).sub(BI.parseFloat(axis.min)))).div(5);
|
||
|
|
});
|
||
|
|
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
config.xAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle : "";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
enableMinorTick: this.config.enableMinorTick,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
maxHeight: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
BI.extend(config.xAxis[1], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
enableMinorTick: this.config.enableMinorTick
|
||
|
|
});
|
||
|
|
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabel(config.plotOptions.dataLabels.enabled, items, config, this.config.chartFont);
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
this.setFontStyle(this.config.chartFont, config);
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle(){
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCordon(){
|
||
|
|
BI.each(self.config.cordon, function(idx, cor){
|
||
|
|
if(idx === 0 && self.xAxis.length > 0){
|
||
|
|
var magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function(i, t){
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if(idx > 0 && self.yAxis.length >= idx){
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function(i, t){
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatChartLineStyle(){
|
||
|
|
switch (self.config.chartLineType) {
|
||
|
|
case BICst.CHART_SHAPE.RIGHT_ANGLE:
|
||
|
|
config.plotOptions.curve = false;
|
||
|
|
config.plotOptions.step = true;
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.CURVE:
|
||
|
|
config.plotOptions.curve = true;
|
||
|
|
config.plotOptions.step = false;
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.NORMAL:
|
||
|
|
default:
|
||
|
|
config.plotOptions.curve = false;
|
||
|
|
config.plotOptions.step = false;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatNumberLevelInYaxis(type, position, formatter){
|
||
|
|
var magnify = self.calcMagnify(type);
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
var max = null;
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
if (position === item.yAxis) {
|
||
|
|
da.y = self.formatXYDataWithMagnify(da.y, magnify);
|
||
|
|
if((BI.isNull(max) || BI.parseFloat(da.y) > BI.parseFloat(max))){
|
||
|
|
max = da.y;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if(position === item.yAxis){
|
||
|
|
item.tooltip = BI.deepClone(config.plotOptions.tooltip);
|
||
|
|
item.tooltip.formatter.valueFormat = formatter;
|
||
|
|
}
|
||
|
|
if(BI.isNotNull(max)){
|
||
|
|
self.maxes.push(max);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position){
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if(position === self.constants.X_AXIS){
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if(position === self.constants.LEFT_AXIS){
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if(position === self.constants.RIGHT_AXIS){
|
||
|
|
self.config.rightYAxisUnit !== "" && (unit = unit + self.config.rightYAxisUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
}
|
||
|
|
|
||
|
|
function _calculateValueNiceDomain(minValue, maxValue){
|
||
|
|
|
||
|
|
minValue = Math.min(0, minValue);
|
||
|
|
|
||
|
|
var tickInterval = _linearTickInterval(minValue, maxValue);
|
||
|
|
|
||
|
|
return _linearNiceDomain(minValue, maxValue, tickInterval);
|
||
|
|
}
|
||
|
|
|
||
|
|
function _linearTickInterval(minValue, maxValue, m){
|
||
|
|
|
||
|
|
m = m || 5;
|
||
|
|
var span = maxValue - minValue;
|
||
|
|
var step = Math.pow(10, Math.floor(Math.log(span / m) / Math.LN10));
|
||
|
|
var err = m / span * step;
|
||
|
|
|
||
|
|
if (err <= .15) step *= 10; else if (err <= .35) step *= 5; else if (err <= .75) step *= 2;
|
||
|
|
|
||
|
|
return step;
|
||
|
|
}
|
||
|
|
|
||
|
|
function _linearNiceDomain(minValue, maxValue, tickInterval){
|
||
|
|
|
||
|
|
minValue = VanUtils.accMul(Math.floor(minValue / tickInterval), tickInterval);
|
||
|
|
|
||
|
|
maxValue = VanUtils.accMul(Math.ceil(maxValue / tickInterval), tickInterval);
|
||
|
|
|
||
|
|
return [minValue, maxValue];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function(items){
|
||
|
|
var self = this;
|
||
|
|
this.maxes = [];
|
||
|
|
BI.each(items, function(idx, item){
|
||
|
|
BI.each(item, function(id, it){
|
||
|
|
if(idx > 0){
|
||
|
|
BI.extend(it, {reversed: true, xAxis: 1});
|
||
|
|
}else{
|
||
|
|
BI.extend(it, {reversed: false, xAxis: 0});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return items;
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
rightYAxisTitle: options.rightYAxisTitle || "",
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.NORMAL,
|
||
|
|
chartLineType: options.chartLineType || c.NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
rightYAxisStyle: options.rightYAxisStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
showRightYAxisTitle: options.showRightYAxisTitle || false,
|
||
|
|
leftYAxisReversed: options.leftYAxisReversed || false,
|
||
|
|
rightYAxisReversed: options.rightYAxisReversed || false,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
rightYAxisNumberLevel: options.rightYAxisNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
rightYAxisUnit: options.rightYAxisUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showDataTable: options.showDataTable || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
showZoom: options.showZoom || false,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
rightNumSeparators: options.rightNumSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
|
||
|
|
this.yAxis = [];
|
||
|
|
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function(idx, axisItems){
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function(id, item){
|
||
|
|
type.push(BICst.WIDGET.AXIS);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
|
||
|
|
BI.each(types, function(idx, type){
|
||
|
|
if(BI.isEmptyArray(type)){
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var newYAxis = {
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: self.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: self.constants.FONT_STYLE,
|
||
|
|
position: idx > 0 ? "right" : "left",
|
||
|
|
lineWidth: 1,
|
||
|
|
axisIndex: idx,
|
||
|
|
gridLineWidth: 0,
|
||
|
|
reversed: idx > 0
|
||
|
|
};
|
||
|
|
self.yAxis.push(newYAxis);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(this._formatItems(items), types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function(){
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.CompareAxisChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.compare_axis_chart', BI.CompareAxisChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.CompareBarChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.CompareBarChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.CompareBarChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-compare-bar-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.CompareBarChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
formatter: function () {
|
||
|
|
return this > 0 ? this : (-1) * this;
|
||
|
|
},
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.yAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
gridLineWidth: 0,
|
||
|
|
position: "left"
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.CompareBarChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this, o = this.options;
|
||
|
|
var yTitle = getXYAxisUnit(this.config.xAxisNumberLevel, this.constants.LEFT_AXIS);
|
||
|
|
var xTitle = getXYAxisUnit(this.config.leftYAxisNumberLevel, this.constants.X_AXIS);
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
config.yAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle + yTitle : yTitle;
|
||
|
|
config.yAxis[0].title.rotation = this.constants.ROTATION;
|
||
|
|
BI.extend(config.yAxis[0], {
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
maxWidth: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
self.formatNumberLevelInXaxis(items, this.config.leftYAxisNumberLevel);
|
||
|
|
config.xAxis[0].title.text = this.config.showLeftYAxisTitle === true ? this.config.leftYAxisTitle + xTitle : xTitle;
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
formatter: self.formatTickInXYaxis(this.config.leftYAxisStyle, this.config.leftYAxisNumberLevel, this.config.numSeparators, true),
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
showLabel: this.config.showLabel,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
enableMinorTick: this.config.enableMinorTick
|
||
|
|
});
|
||
|
|
|
||
|
|
config.chartType = "bar";
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabelForAxis(config.plotOptions.dataLabels.enabled, items, config.xAxis[0].formatter, this.config.chartFont);
|
||
|
|
|
||
|
|
config.plotOptions.tooltip.formatter.valueFormat = config.xAxis[0].formatter;
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
this.setFontStyle(this.config.chartFont, config);
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle() {
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCordon() {
|
||
|
|
BI.each(self.config.cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
var magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.X_AXIS) {
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.LEFT_AXIS) {
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.RIGHT_AXIS) {
|
||
|
|
self.config.rightYAxisUnit !== "" && (unit = unit + self.config.rightYAxisUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (items) {
|
||
|
|
var result = [];
|
||
|
|
var i = BI.UUID();
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item, function (id, it) {
|
||
|
|
BI.each(it.data, function (i, t) {
|
||
|
|
var tmp = t.x;
|
||
|
|
t.x = t.y;
|
||
|
|
t.y = tmp;
|
||
|
|
if (idx === 0) {
|
||
|
|
t.x = -t.x;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
it.stack = i;
|
||
|
|
})
|
||
|
|
});
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
result = BI.concat(result, item);
|
||
|
|
});
|
||
|
|
return [result];
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.STYLE_NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
xAxisStyle: options.xAxisStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
leftYAxisReversed: options.leftYAxisReversed || false,
|
||
|
|
xAxisNumberLevel: options.xAxisNumberLevel || c.NORMAL,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showDataTable: options.showDataTable || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
showZoom: options.showZoom || false,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE
|
||
|
|
};
|
||
|
|
this.options.items = this._formatItems(items);
|
||
|
|
var types = [];
|
||
|
|
BI.each(this.options.items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.BAR);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
this.combineChart.populate(this.options.items, types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.CompareBarChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.compare_bar_chart', BI.CompareBarChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.DashboardChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.DashboardChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.DashboardChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-dashboard-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.DashboardChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.gaugeAxis = [{
|
||
|
|
"minorTickColor": "rgb(226,226,226)",
|
||
|
|
"tickColor": "rgb(186,186,186)",
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
"step": 0,
|
||
|
|
"showLabel": true
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.DashboardChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this, o = this.options;
|
||
|
|
var isDashboard = BI.contains([self.constants.NORMAL, self.constants.HALF_DASHBOARD], self.config.chartDashboardType);
|
||
|
|
var isMultiPointers = self.config.numberOfPointer === self.constants.MULTI_POINTER;
|
||
|
|
formatChartDashboardStyle();
|
||
|
|
config.chartType = "gauge";
|
||
|
|
delete config.zoom;
|
||
|
|
delete config.xAxis;
|
||
|
|
delete config.yAxis;
|
||
|
|
if (isDashboard && !isMultiPointers) {
|
||
|
|
config.plotOptions.seriesLabel.enabled = false;
|
||
|
|
if(BI.isNull(items[0].data[0].z)) {
|
||
|
|
config.plotOptions.tooltip.formatter.identifier = "${SERIES}${X}${Y}${SIZE}${VALUE}"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
config.gaugeAxis[0].labelStyle = this.config.chartFont;
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartDashboardStyle() {
|
||
|
|
var bands = getBandsStyles(self.config.bandsStyles, self.config.autoCustomStyle);
|
||
|
|
var percentageLabel = BI.extend(config.plotOptions.percentageLabel, {
|
||
|
|
enabled: self.config.showPercentage === BICst.PERCENTAGE.SHOW
|
||
|
|
});
|
||
|
|
|
||
|
|
config.gaugeAxis = self.gaugeAxis;
|
||
|
|
var slotValueLAbel = {
|
||
|
|
enabled: true,
|
||
|
|
formatter: function () {
|
||
|
|
var value = this.value;
|
||
|
|
if (self.config.dashboardNumberLevel === BICst.TARGET_STYLE.NUM_LEVEL.PERCENT && self.config.numSeparators) {
|
||
|
|
value = BI.contentFormat(this.value, "#,##0%;-#,##0%")
|
||
|
|
} else if (self.config.dashboardNumberLevel === BICst.TARGET_STYLE.NUM_LEVEL.PERCENT && !self.config.numSeparators) {
|
||
|
|
value = BI.contentFormat(this.value, "#0.00%");
|
||
|
|
} else if (!(self.config.dashboardNumberLevel === BICst.TARGET_STYLE.NUM_LEVEL.PERCENT) && self.config.numSeparators) {
|
||
|
|
value = BI.contentFormat(this.value, "#,###.##;-#,###.##")
|
||
|
|
} else {
|
||
|
|
value = BI.contentFormat(this.value, "#.##;-#.##");
|
||
|
|
}
|
||
|
|
|
||
|
|
var label = '<div style="text-align: center">' + this.seriesName + '</div>' + '<div style="text-align: center">' + value +
|
||
|
|
getXYAxisUnit(self.config.dashboardNumberLevel, self.constants.DASHBOARD_AXIS) + '</div>';
|
||
|
|
|
||
|
|
if (isDashboard && items[0].data.length > 1) {
|
||
|
|
if (isMultiPointers) {
|
||
|
|
return '<div style="text-align: center">' + this.seriesName + ':' + value +
|
||
|
|
getXYAxisUnit(self.config.dashboardNumberLevel, self.constants.DASHBOARD_AXIS) + '</div>';
|
||
|
|
}
|
||
|
|
return label
|
||
|
|
} else if (isDashboard && BI.isNull(items[0].data[0].z)) {
|
||
|
|
return label
|
||
|
|
}
|
||
|
|
|
||
|
|
return '<div style="text-align: center">' + this.category + '</div>' + label;
|
||
|
|
},
|
||
|
|
style: self.config.chartFont,
|
||
|
|
useHtml: true
|
||
|
|
};
|
||
|
|
switch (self.config.chartDashboardType) {
|
||
|
|
case BICst.CHART_SHAPE.HALF_DASHBOARD:
|
||
|
|
setPlotOptions("pointer_semi", bands, slotValueLAbel, percentageLabel);
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.PERCENT_DASHBOARD:
|
||
|
|
setPlotOptions("ring", bands, slotValueLAbel, percentageLabel);
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.PERCENT_SCALE_SLOT:
|
||
|
|
setPlotOptions("slot", bands, slotValueLAbel, percentageLabel);
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.HORIZONTAL_TUBE:
|
||
|
|
BI.extend(slotValueLAbel, {
|
||
|
|
align: "bottom"
|
||
|
|
});
|
||
|
|
BI.extend(percentageLabel, {
|
||
|
|
align: "bottom"
|
||
|
|
});
|
||
|
|
setPlotOptions("thermometer", bands, slotValueLAbel, percentageLabel, "horizontal", "vertical");
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.VERTICAL_TUBE:
|
||
|
|
BI.extend(slotValueLAbel, {
|
||
|
|
align: "left"
|
||
|
|
});
|
||
|
|
BI.extend(percentageLabel, {
|
||
|
|
align: "left"
|
||
|
|
});
|
||
|
|
setPlotOptions("thermometer", bands, slotValueLAbel, percentageLabel, "vertical", "horizontal");
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.NORMAL:
|
||
|
|
default:
|
||
|
|
setPlotOptions("pointer", bands, slotValueLAbel, percentageLabel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
changeMaxMinScale();
|
||
|
|
formatNumberLevelInYaxis(self.config.dashboardNumberLevel, self.constants.LEFT_AXIS);
|
||
|
|
if (self.config.dashboardNumberLevel === BICst.TARGET_STYLE.NUM_LEVEL.PERCENT) {
|
||
|
|
config.gaugeAxis[0].formatter = function () {
|
||
|
|
var scaleValue = this;
|
||
|
|
if (self.config.numSeparators) {
|
||
|
|
scaleValue = BI.contentFormat(scaleValue, '#,##0%;-#,##0%')
|
||
|
|
} else {
|
||
|
|
scaleValue = BI.contentFormat(scaleValue, '#0.00%')
|
||
|
|
}
|
||
|
|
return scaleValue + getXYAxisUnit(self.config.dashboardNumberLevel, self.constants.DASHBOARD_AXIS);
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
config.gaugeAxis[0].formatter = function () {
|
||
|
|
var value = this;
|
||
|
|
if (self.config.numSeparators) {
|
||
|
|
value = BI.contentFormat(value, "#,###;-#,###")
|
||
|
|
}
|
||
|
|
return value + getXYAxisUnit(self.config.dashboardNumberLevel, self.constants.DASHBOARD_AXIS);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function setPlotOptions(style, bands, slotValueLAbel, percentageLabel, thermometerLayout, layout) {
|
||
|
|
config.style = style;
|
||
|
|
config.plotOptions.bands = bands;
|
||
|
|
config.plotOptions.valueLabel = slotValueLAbel;
|
||
|
|
config.plotOptions.percentageLabel = percentageLabel;
|
||
|
|
config.plotOptions.thermometerLayout = thermometerLayout;
|
||
|
|
config.plotOptions.layout = layout;
|
||
|
|
}
|
||
|
|
|
||
|
|
function changeMaxMinScale() {
|
||
|
|
self.gaugeAxis[0].min = BI.parseFloat(self.config.minScale) || null;
|
||
|
|
self.gaugeAxis[0].max = BI.parseFloat(self.config.maxScale) || null;
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatNumberLevelInYaxis(type, position) {
|
||
|
|
var magnify = self.calcMagnify(type);
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
if (position === item.yAxis) {
|
||
|
|
da.y = self.formatXYDataWithMagnify(da.y, magnify);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
config.plotOptions.tooltip.formatter.valueFormat = function () {
|
||
|
|
return BI.contentFormat(this, '#.##;-#.##') + getXYAxisUnit(type, position)
|
||
|
|
};
|
||
|
|
|
||
|
|
if (self.config.numSeparators) {
|
||
|
|
config.plotOptions.tooltip.formatter.valueFormat = function () {
|
||
|
|
return BI.contentFormat(arguments[0], '#,###.##;-#,###.##')
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
if (type === BICst.TARGET_STYLE.NUM_LEVEL.PERCENT) {
|
||
|
|
config.plotOptions.tooltip.formatter.valueFormat = function () {
|
||
|
|
return BI.contentFormat(arguments[0], '#0.00%')
|
||
|
|
};
|
||
|
|
if (self.config.numSeparators) {
|
||
|
|
config.plotOptions.tooltip.formatter.valueFormat = function () {
|
||
|
|
return BI.contentFormat(arguments[0], '#,##0%;-#,##0%')
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.DASHBOARD_AXIS) {
|
||
|
|
self.config.dashboardUnit !== "" && (unit = unit + self.config.dashboardUnit)
|
||
|
|
}
|
||
|
|
return unit;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getBandsStyles(styles, change) {
|
||
|
|
var min = 0, bands = [], color = null, max = null, conditionMax = null;
|
||
|
|
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
var data = item.data[0];
|
||
|
|
if ((BI.isNull(max) || data.y > max)) {
|
||
|
|
max = data.y
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
switch (change) {
|
||
|
|
|
||
|
|
case BICst.SCALE_SETTING.AUTO:
|
||
|
|
break;
|
||
|
|
case BICst.SCALE_SETTING.CUSTOM:
|
||
|
|
if (styles.length === 0) {
|
||
|
|
return bands
|
||
|
|
} else {
|
||
|
|
var maxScale = _calculateValueNiceDomain(0, max)[1];
|
||
|
|
|
||
|
|
BI.each(styles, function (idx, style) {
|
||
|
|
if(BI.parseFloat(style.range.min) > BI.parseFloat(style.range.max)) {
|
||
|
|
return bands.push({
|
||
|
|
color: color,
|
||
|
|
from: conditionMax,
|
||
|
|
to: maxScale
|
||
|
|
});
|
||
|
|
}
|
||
|
|
bands.push({
|
||
|
|
color: style.color,
|
||
|
|
from: style.range.min,
|
||
|
|
to: style.range.max
|
||
|
|
});
|
||
|
|
color = style.color;
|
||
|
|
conditionMax = style.range.max
|
||
|
|
});
|
||
|
|
min = BI.parseInt(styles[0].range.min);
|
||
|
|
bands.push({
|
||
|
|
color: "#808080",
|
||
|
|
from: 0,
|
||
|
|
to: min
|
||
|
|
});
|
||
|
|
|
||
|
|
bands.push({
|
||
|
|
color: color,
|
||
|
|
from: conditionMax,
|
||
|
|
to: maxScale
|
||
|
|
});
|
||
|
|
|
||
|
|
return bands;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function _calculateValueNiceDomain(minValue, maxValue) {
|
||
|
|
minValue = Math.min(0, minValue);
|
||
|
|
var tickInterval = _linearTickInterval(minValue, maxValue);
|
||
|
|
|
||
|
|
return _linearNiceDomain(minValue, maxValue, tickInterval);
|
||
|
|
}
|
||
|
|
|
||
|
|
function _linearTickInterval(minValue, maxValue, m) {
|
||
|
|
m = m || 5;
|
||
|
|
var span = maxValue - minValue;
|
||
|
|
var step = Math.pow(10, Math.floor(Math.log(span / m) / Math.LN10));
|
||
|
|
var err = m / span * step;
|
||
|
|
if (err <= .15) step *= 10; else if (err <= .35) step *= 5; else if (err <= .75) step *= 2;
|
||
|
|
|
||
|
|
return step;
|
||
|
|
}
|
||
|
|
|
||
|
|
function _linearNiceDomain(minValue, maxValue, tickInterval) {
|
||
|
|
minValue = VanUtils.accMul(Math.floor(minValue / tickInterval), tickInterval);
|
||
|
|
maxValue = VanUtils.accMul(Math.ceil(maxValue / tickInterval), tickInterval);
|
||
|
|
|
||
|
|
return [minValue, maxValue];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (items) {
|
||
|
|
if (items.length === 0) {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
var c = this.constants;
|
||
|
|
if (this.config.chartDashboardType === c.NORMAL || this.config.chartDashboardType === c.HALF_DASHBOARD) {
|
||
|
|
var result = [];
|
||
|
|
if (this.config.numberOfPointer === c.ONE_POINTER && items[0].length === 1) {//单个系列
|
||
|
|
BI.each(items[0][0].data, function (idx, da) {
|
||
|
|
result.push({
|
||
|
|
data: [BI.extend({}, da, {
|
||
|
|
x: items[0][0].name
|
||
|
|
})],
|
||
|
|
name: da.x
|
||
|
|
})
|
||
|
|
});
|
||
|
|
return [result];
|
||
|
|
} else if(this.config.numberOfPointer === c.ONE_POINTER && items[0].length > 1) {
|
||
|
|
BI.each(items[0], function (idx, item) {
|
||
|
|
result.push({
|
||
|
|
data: [BI.extend(item.data[0], {
|
||
|
|
x: item.name
|
||
|
|
})],
|
||
|
|
name: BI.UUID()
|
||
|
|
})
|
||
|
|
});
|
||
|
|
return [result]
|
||
|
|
}
|
||
|
|
if (this.config.numberOfPointer === c.MULTI_POINTER && items[0].length > 1) {//多个系列
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item, function (id, it) {
|
||
|
|
var data = it.data[0];
|
||
|
|
data.x = it.name;
|
||
|
|
result.push(data);
|
||
|
|
})
|
||
|
|
});
|
||
|
|
return [[{
|
||
|
|
data: result,
|
||
|
|
name: ""
|
||
|
|
}]];
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
var others = [];
|
||
|
|
if (BI.isNotNull(items[0][0].data[0].z)) {
|
||
|
|
BI.each(items[0], function (idx, item) {
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
others.push({
|
||
|
|
data: [BI.extend({}, da, {
|
||
|
|
x: item.name,
|
||
|
|
y: da.y
|
||
|
|
})],
|
||
|
|
name: da.x
|
||
|
|
})
|
||
|
|
})
|
||
|
|
});
|
||
|
|
return [others];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return items;
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants, o = this.options;
|
||
|
|
this.config = {
|
||
|
|
dashboardNumberLevel: options.dashboardNumberLevel || c.NORMAL,
|
||
|
|
dashboardUnit: options.dashboardUnit || "",
|
||
|
|
chartDashboardType: options.chartDashboardType || c.NORMAL,
|
||
|
|
numberOfPointer: options.numberOfPointer || c.ONE_POINTER,
|
||
|
|
bandsStyles: options.bandsStyles || [],
|
||
|
|
autoCustomStyle: options.autoCustom || c.AUTO,
|
||
|
|
minScale: options.minScale,
|
||
|
|
maxScale: options.maxScale,
|
||
|
|
showPercentage: options.showPercentage || c.NOT_SHOW,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE
|
||
|
|
};
|
||
|
|
o.items = this._formatItems(items);
|
||
|
|
var types = [];
|
||
|
|
BI.each(o.items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.DASHBOARD);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(o.items, types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.DashboardChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.dashboard_chart', BI.DashboardChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.DonutChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.DonutChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.DonutChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-donut-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.DonutChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.DonutChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function(config, items){
|
||
|
|
var self = this;
|
||
|
|
delete config.zoom;
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
|
||
|
|
config.plotOptions.innerRadius = "50.0%";
|
||
|
|
config.chartType = "pie";
|
||
|
|
config.plotOptions.dataLabels.align = "outside";
|
||
|
|
config.plotOptions.dataLabels.connectorWidth = "outside";
|
||
|
|
config.plotOptions.dataLabels.style = this.config.chartFont;
|
||
|
|
config.plotOptions.dataLabels.formatter.identifier = "${VALUE}${PERCENT}";
|
||
|
|
delete config.xAxis;
|
||
|
|
delete config.yAxis;
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
da.y = self.formatXYDataWithMagnify(da.y, 1);
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
config.legend.style = this.config.chartFont;
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle(){
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.NORMAL,
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function(idx, axisItems){
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function(id, item){
|
||
|
|
type.push(BICst.WIDGET.DONUT);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(items, types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function(){
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.DonutChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.donut_chart', BI.DonutChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.FallAxisChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.FallAxisChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.FallAxisChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-fall-axis-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.FallAxisChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "bottom",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.yAxis = [{
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "left",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.FallAxisChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function(config, items){
|
||
|
|
var self = this, o = this.options;
|
||
|
|
var yTitle = getXYAxisUnit(this.config.leftYAxisNumberLevel, this.constants.LEFT_AXIS);
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatCordon();
|
||
|
|
config.legend.enabled = false;
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.dataSheet.enabled = this.config.showDataTable;
|
||
|
|
if(config.dataSheet.enabled === true){
|
||
|
|
config.xAxis[0].showLabel = false;
|
||
|
|
}
|
||
|
|
config.zoom.zoomTool.enabled = this.config.showZoom;
|
||
|
|
if(this.config.showZoom === true){
|
||
|
|
delete config.dataSheet;
|
||
|
|
delete config.zoom.zoomType;
|
||
|
|
}
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
BI.extend(config.yAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
showLabel: this.config.showLabel,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
enableMinorTick: this.config.enableMinorTick,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(this.config.leftYAxisStyle, this.config.leftYAxisNumberLevel, this.config.numSeparators)
|
||
|
|
});
|
||
|
|
formatNumberLevelInYaxis(this.config.leftYAxisNumberLevel, this.constants.LEFT_AXIS, config.yAxis[0].formatter);
|
||
|
|
config.yAxis[0].title.rotation = this.constants.ROTATION;
|
||
|
|
config.yAxis[0].title.text = this.config.showLeftYAxisTitle === true ? this.config.leftYAxisTitle + yTitle : yTitle;
|
||
|
|
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
config.xAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle : "";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
enableMinorTick: this.config.enableMinorTick,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
maxHeight: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
if(config.plotOptions.dataLabels.enabled === true){
|
||
|
|
BI.each(items, function(idx, item){
|
||
|
|
if(idx === 0){
|
||
|
|
item.dataLabels = {};
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
item.dataLabels = {
|
||
|
|
"style": self.config.chartFont,
|
||
|
|
"align": "outside",
|
||
|
|
"autoAdjust": true,
|
||
|
|
enabled: true,
|
||
|
|
formatter: {
|
||
|
|
identifier: "${VALUE}",
|
||
|
|
valueFormat: config.yAxis[0].formatter
|
||
|
|
}
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
this.setFontStyle(this.config.chartFont, config);
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle(){
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCordon(){
|
||
|
|
BI.each(self.config.cordon, function(idx, cor){
|
||
|
|
if(idx === 0 && self.xAxis.length > 0){
|
||
|
|
var magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function(i, t){
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style": self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if(idx > 0 && self.yAxis.length >= idx){
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function(i, t){
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style": self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatNumberLevelInYaxis(type, position, formatter){
|
||
|
|
var magnify = self.calcMagnify(type);
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
if (position === item.yAxis) {
|
||
|
|
da.y = self.formatXYDataWithMagnify(da.y, magnify);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
});
|
||
|
|
config.plotOptions.tooltip.formatter.valueFormat = formatter;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position){
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if(position === self.constants.X_AXIS){
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if(position === self.constants.LEFT_AXIS){
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if(position === self.constants.RIGHT_AXIS){
|
||
|
|
self.config.rightYAxisUnit !== "" && (unit = unit + self.config.rightYAxisUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function(items){
|
||
|
|
var o = this.options;
|
||
|
|
if(BI.isEmptyArray(items)){
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
items = items[0];
|
||
|
|
var tables = [], sum = 0;
|
||
|
|
var colors = this.config.chartColor || [];
|
||
|
|
if(BI.isEmptyArray(colors)){
|
||
|
|
colors = ["rgb(152, 118, 170)", "rgb(0, 157, 227)"];
|
||
|
|
}
|
||
|
|
BI.each(items, function(idx, item){
|
||
|
|
BI.each(item.data, function(i, t){
|
||
|
|
if(t.y < 0){
|
||
|
|
tables.push([t.x, t.y, sum + t.y, t]);
|
||
|
|
}else{
|
||
|
|
tables.push([t.x, t.y, sum, t]);
|
||
|
|
}
|
||
|
|
sum += t.y;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
return [BI.map(BI.makeArray(2, null), function(idx, item){
|
||
|
|
return {
|
||
|
|
"data": BI.map(tables, function(id, cell){
|
||
|
|
var axis = BI.extend({}, cell[3], {
|
||
|
|
x: cell[0],
|
||
|
|
y: Math.abs(cell[2 - idx])
|
||
|
|
});
|
||
|
|
if(idx === 1){
|
||
|
|
axis.color = cell[2 - idx] < 0 ? colors[1] : colors[0];
|
||
|
|
}else{
|
||
|
|
axis.color = "rgba(0,0,0,0)";
|
||
|
|
axis.borderColor = "rgba(0,0,0,0)";
|
||
|
|
axis.borderWidth = 0;
|
||
|
|
axis.clickColor = "rgba(0,0,0,0)";
|
||
|
|
axis.mouseOverColor = "rgba(0,0,0,0)";
|
||
|
|
axis.tooltip = {
|
||
|
|
enable: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return axis;
|
||
|
|
}),
|
||
|
|
stack: "stackedFall",
|
||
|
|
name: idx === 1 ? items[0].name : BI.UUID()
|
||
|
|
};
|
||
|
|
})];
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
chartColor: options.chartColor || ["#5caae4", "#70cc7f", "#ebbb67", "#e97e7b", "#6ed3c9"],
|
||
|
|
chartStyle: options.chartStyle || c.NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showDataTable: options.showDataTable || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
showZoom: options.showZoom || false,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function(idx, axisItems){
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function(id, item){
|
||
|
|
type.push(BICst.WIDGET.AXIS);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(this._formatItems(items), types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function(){
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.FallAxisChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.fall_axis_chart', BI.FallAxisChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.ForceBubbleChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.ForceBubbleChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.ForceBubbleChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-force-bubble-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.ForceBubbleChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.ForceBubbleChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this, o = this.options;
|
||
|
|
config.chartType = 'forceBubble';
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
|
||
|
|
config.plotOptions.force = true;
|
||
|
|
config.plotOptions.shadow = this.config.bubbleStyle !== this.constants.NO_PROJECT;
|
||
|
|
config.plotOptions.dataLabels.enabled = true;
|
||
|
|
config.plotOptions.dataLabels.align = "inside";
|
||
|
|
config.plotOptions.dataLabels.style = this.config.chartFont;
|
||
|
|
config.plotOptions.dataLabels.formatter.identifier = "${CATEGORY}${VALUE}";
|
||
|
|
delete config.xAxis;
|
||
|
|
delete config.yAxis;
|
||
|
|
delete config.zoom;
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
da.y = self.formatXYDataWithMagnify(da.y, 1);
|
||
|
|
})
|
||
|
|
});
|
||
|
|
config.legend.style = this.config.chartFont;
|
||
|
|
return [items, config];
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
bubbleStyle: options.bubbleStyle || c.NO_PROJECT,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.FORCE_BUBBLE);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(items, types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.ForceBubbleChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.force_bubble_chart', BI.ForceBubbleChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.GISMapChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.GISMapChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.GISMapChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-gis-map-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.GISMapChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.GISMapChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
delete config.dataSheet;
|
||
|
|
delete config.legend;
|
||
|
|
delete config.zoom;
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.dataLabels.useHtml = true;
|
||
|
|
config.plotOptions.dataLabels.style = this.config.chartFont;
|
||
|
|
config.plotOptions.dataLabels.formatter = function () {
|
||
|
|
var name = (BI.isArray(this.name) ? '' : this.name + ',') + BI.contentFormat(this.value, '#.##;-#.##') ;
|
||
|
|
var style = "padding: 5px; background-color: rgba(0,0,0,0.4980392156862745);border-color: rgb(0,0,0); border-radius:2px; border-width:0px;";
|
||
|
|
var a = '<div style = ' + style + '>' + name + '</div>';
|
||
|
|
return a;
|
||
|
|
};
|
||
|
|
config.plotOptions.tooltip.shared = true;
|
||
|
|
config.plotOptions.tooltip.formatter = function () {
|
||
|
|
var tip = BI.isArray(this.name) ? '' : this.name;
|
||
|
|
BI.each(this.points, function (idx, point) {
|
||
|
|
tip += ('<div>' + point.seriesName + ':' + BI.contentFormat((point.size || point.y), '#.##;-#.##') + '</div>');
|
||
|
|
});
|
||
|
|
return tip;
|
||
|
|
};
|
||
|
|
config.geo = {
|
||
|
|
"tileLayer": "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
|
||
|
|
"attribution": "<a><img src='http://webapi.amap.com/theme/v1.3/mapinfo_05.png'>© 2016 AutoNavi</a>"
|
||
|
|
};
|
||
|
|
if (this.config.showBackgroundLayer === true && BI.isNotNull(this.config.backgroundLayerInfo)) {
|
||
|
|
config.geo = {};
|
||
|
|
if (this.config.backgroundLayerInfo.type === BICst.WMS_SERVER) {
|
||
|
|
config.geo.tileLayer = false;
|
||
|
|
config.geo.wmsUrl = this.config.backgroundLayerInfo.url;
|
||
|
|
config.geo.wmsLayer = this.config.backgroundLayerInfo.wmsLayer
|
||
|
|
} else {
|
||
|
|
config.geo.tileLayer = this.config.backgroundLayerInfo.url;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
config.chartType = "pointMap";
|
||
|
|
config.plotOptions.icon = {
|
||
|
|
iconUrl: BICst.GIS_ICON_PATH,
|
||
|
|
iconSize: [24, 24]
|
||
|
|
};
|
||
|
|
|
||
|
|
config.plotOptions.marker = {
|
||
|
|
symbol: BICst.GIS_ICON_PATH,
|
||
|
|
width: 24,
|
||
|
|
height: 24,
|
||
|
|
enable: true
|
||
|
|
};
|
||
|
|
delete config.xAxis;
|
||
|
|
delete config.yAxis;
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
_checkLngLatValid: function (lnglat) {
|
||
|
|
if (lnglat.length < 2) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return lnglat[0] <= 180 && lnglat[0] >= -180 && lnglat[1] <= 90 && lnglat[1] >= -90;
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (items) {
|
||
|
|
var self = this;
|
||
|
|
var results = [];
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
var result = [];
|
||
|
|
BI.each(item, function (id, it) {
|
||
|
|
var res = [];
|
||
|
|
BI.each(it.data, function (i, da) {
|
||
|
|
da.y = self.formatXYDataWithMagnify(da.y, 1);
|
||
|
|
var lnglat = da.x.split(",");
|
||
|
|
if (self.config.lnglat === self.constants.LAT_FIRST) {
|
||
|
|
var lng = lnglat[1];
|
||
|
|
lnglat[1] = lnglat[0];
|
||
|
|
lnglat[0] = lng;
|
||
|
|
}
|
||
|
|
da.lnglat = lnglat;
|
||
|
|
da.value = da.y;
|
||
|
|
da.name = BI.isNotNull(da.z) ? da.z : da.lnglat;
|
||
|
|
if (self._checkLngLatValid(da.lnglat)) {
|
||
|
|
res.push(da);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (BI.isNotEmptyArray(res)) {
|
||
|
|
result.push(BI.extend(it, {
|
||
|
|
data: res
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (BI.isNotEmptyArray(result)) {
|
||
|
|
results.push(result);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return results;
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
lnglat: options.lnglat || c.LNG_FIRST,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE,
|
||
|
|
showBackgroundLayer: options.showBackgroundLayer || false,
|
||
|
|
backgroundLayerInfo: options.backgroundLayerInfo
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function () {
|
||
|
|
type.push(BICst.WIDGET.GIS_MAP);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(this._formatItems(items), types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.GISMapChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.gis_map_chart', BI.GISMapChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.LineChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.LineChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.LineChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-line-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.LineChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "bottom",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.LineChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this, o = this.options;
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatChartLineStyle();
|
||
|
|
formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.connectNulls = this.config.nullContinue;
|
||
|
|
config.dataSheet.enabled = this.config.showDataTable;
|
||
|
|
config.xAxis[0].showLabel = !config.dataSheet.enabled;
|
||
|
|
config.zoom.zoomTool.enabled = this.config.showZoom;
|
||
|
|
if (this.config.showZoom === true) {
|
||
|
|
delete config.dataSheet;
|
||
|
|
delete config.zoom.zoomType;
|
||
|
|
}
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
BI.each(config.yAxis, function (idx, axis) {
|
||
|
|
var title = "";
|
||
|
|
switch (axis.axisIndex) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
title = getXYAxisUnit(self.config.leftYAxisNumberLevel, self.constants.LEFT_AXIS);
|
||
|
|
axis.title.text = self.config.showLeftYAxisTitle === true ? self.config.leftYAxisTitle + title : title;
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.leftYAxisReversed,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.leftYAxisStyle, self.config.leftYAxisNumberLevel, self.config.numSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.leftYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
title = getXYAxisUnit(self.config.rightYAxisNumberLevel, self.constants.RIGHT_AXIS);
|
||
|
|
axis.title.text = self.config.showRightYAxisTitle === true ? self.config.rightYAxisTitle + title : title;
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.rightYAxisReversed,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.rightYAxisStyle, self.config.rightYAxisNumberLevel, self.config.rightNumSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.rightYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
config.xAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle : "";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
maxHeight: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
config.chartType = "line";
|
||
|
|
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabel(config.plotOptions.dataLabels.enabled, items, config, this.config.chartFont);
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
this.setFontStyle(this.config.chartFont, config);
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle() {
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCordon() {
|
||
|
|
BI.each(self.config.cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
var magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatChartLineStyle() {
|
||
|
|
switch (self.config.chartLineType) {
|
||
|
|
case BICst.CHART_SHAPE.RIGHT_ANGLE:
|
||
|
|
config.plotOptions.curve = false;
|
||
|
|
config.plotOptions.step = true;
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.CURVE:
|
||
|
|
config.plotOptions.curve = true;
|
||
|
|
config.plotOptions.step = false;
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.NORMAL:
|
||
|
|
default:
|
||
|
|
config.plotOptions.curve = false;
|
||
|
|
config.plotOptions.step = false;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.X_AXIS) {
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.LEFT_AXIS) {
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.RIGHT_AXIS) {
|
||
|
|
self.config.rightYAxisUnit !== "" && (unit = unit + self.config.rightYAxisUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
rightYAxisTitle: options.rightYAxisTitle || "",
|
||
|
|
chartLineType: options.chartLineType || c.NORMAL,
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
rightYAxisStyle: options.rightYAxisStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
showRightYAxisTitle: options.showRightYAxisTitle || false,
|
||
|
|
leftYAxisReversed: options.leftYAxisReversed || false,
|
||
|
|
rightYAxisReversed: options.rightYAxisReversed || false,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
rightYAxisNumberLevel: options.rightYAxisNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
rightYAxisUnit: options.rightYAxisUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showDataTable: options.showDataTable || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
showZoom: options.showZoom || false,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
rightNumSeparators: options.rightNumSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE,
|
||
|
|
nullContinue: options.nullContinue || false
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.LINE);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.yAxis = [];
|
||
|
|
BI.each(types, function (idx, type) {
|
||
|
|
if (BI.isEmptyArray(type)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var newYAxis = {
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: self.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: self.constants.FONT_STYLE,
|
||
|
|
position: idx > 0 ? "right" : "left",
|
||
|
|
lineWidth: 1,
|
||
|
|
axisIndex: idx,
|
||
|
|
gridLineWidth: 0
|
||
|
|
};
|
||
|
|
self.yAxis.push(newYAxis);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(items, types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.LineChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.line_chart', BI.LineChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.MapChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.MapChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.MapChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-map-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.MapChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.MapChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
formatRangeLegend();
|
||
|
|
delete config.legend;
|
||
|
|
delete config.zoom;
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.tooltip.shared = true;
|
||
|
|
var formatterArray = [];
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
if (BI.has(item, "settings")) {
|
||
|
|
formatterArray.push(formatToolTipAndDataLabel(item.settings.format || c.NORMAL, item.settings.num_level || c.NORMAL,
|
||
|
|
item.settings.unit || "", item.settings.numSeparators || c.NUM_SEPARATORS));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
config.plotOptions.tooltip.formatter = function () {
|
||
|
|
var tip = this.name;
|
||
|
|
var point = this.points[0];
|
||
|
|
var index = BI.isNull(point.size) ? 0 : 1;
|
||
|
|
tip += ('<div>' + point.seriesName + ':' + BI.contentFormat(point.size || point.y, formatterArray[index]) + '</div>');
|
||
|
|
return tip;
|
||
|
|
};
|
||
|
|
config.plotOptions.dataLabels.formatter.valueFormat = function () {
|
||
|
|
return BI.contentFormat(arguments[0], formatterArray[0]);
|
||
|
|
};
|
||
|
|
config.plotOptions.dataLabels.style = this.config.chartFont;
|
||
|
|
|
||
|
|
config.plotOptions.bubble.dataLabels = config.plotOptions.dataLabels;
|
||
|
|
config.plotOptions.bubble.dataLabels.formatter.identifier = "${SIZE}";
|
||
|
|
|
||
|
|
config.plotOptions.bubble.tooltip = config.plotOptions.tooltip;
|
||
|
|
|
||
|
|
config.geo = this.config.geo;
|
||
|
|
if (this.config.showBackgroundLayer === true && BI.isNotNull(this.config.backgroundLayerInfo)) {
|
||
|
|
if (this.config.backgroundLayerInfo.type === BICst.WMS_SERVER) {
|
||
|
|
config.geo.tileLayer = false;
|
||
|
|
config.geo.wmsUrl = this.config.backgroundLayerInfo.url;
|
||
|
|
config.geo.wmsLayer = this.config.backgroundLayerInfo.wmsLayer
|
||
|
|
} else {
|
||
|
|
config.geo.tileLayer = this.config.backgroundLayerInfo.url;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.config.initDrillPath.length > 1) {
|
||
|
|
config.initDrillPath = this.config.initDrillPath;
|
||
|
|
}
|
||
|
|
config.dTools.enabled = true;
|
||
|
|
config.dTools.click = function (point) {
|
||
|
|
point = point || {};
|
||
|
|
var pointOption = point.options || {};
|
||
|
|
self.fireEvent(BI.MapChart.EVENT_CLICK_DTOOL, pointOption);
|
||
|
|
};
|
||
|
|
config.chartType = "areaMap";
|
||
|
|
delete config.xAxis;
|
||
|
|
delete config.yAxis;
|
||
|
|
|
||
|
|
var find = BI.find(items, function (idx, item) {
|
||
|
|
return BI.has(item, "type") && item.type === "areaMap";
|
||
|
|
});
|
||
|
|
if (BI.isNull(find)) {
|
||
|
|
items.push({
|
||
|
|
type: "areaMap",
|
||
|
|
data: []
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatRangeLegend() {
|
||
|
|
config.rangeLegend.enabled = true;
|
||
|
|
switch (self.config.chartLegend) {
|
||
|
|
case BICst.CHART_LEGENDS.BOTTOM:
|
||
|
|
config.rangeLegend.visible = true;
|
||
|
|
config.rangeLegend.position = "bottom";
|
||
|
|
break;
|
||
|
|
case BICst.CHART_LEGENDS.RIGHT:
|
||
|
|
config.rangeLegend.visible = true;
|
||
|
|
config.rangeLegend.position = "right";
|
||
|
|
break;
|
||
|
|
case BICst.CHART_LEGENDS.NOT_SHOW:
|
||
|
|
config.rangeLegend.visible = false;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
config.rangeLegend.continuous = false;
|
||
|
|
config.rangeLegend.range = getRangeStyle(self.config.mapStyles, self.config.autoCustom, self.config.themeColor);
|
||
|
|
config.rangeLegend.formatter = function () {
|
||
|
|
var to = this.to;
|
||
|
|
if (BI.isNotEmptyArray(items) && BI.has(items[0], "settings")) {
|
||
|
|
var settings = items[0].settings;
|
||
|
|
var legendFormat = formatToolTipAndDataLabel(settings.format || c.NORMAL, settings.num_level || c.NORMAL,
|
||
|
|
settings.unit || "", settings.numSeparators || c.NUM_SEPARATORS);
|
||
|
|
to = BI.contentFormat(to, legendFormat)
|
||
|
|
}
|
||
|
|
return to
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatToolTipAndDataLabel(format, numberLevel, unit, numSeparators) {
|
||
|
|
var formatter = '#.##';
|
||
|
|
switch (format) {
|
||
|
|
case self.constants.NORMAL:
|
||
|
|
formatter = '#.##';
|
||
|
|
if (numSeparators) formatter = '#,###.##';
|
||
|
|
break;
|
||
|
|
case self.constants.ZERO2POINT:
|
||
|
|
formatter = '#0';
|
||
|
|
if (numSeparators) formatter = '#,###';
|
||
|
|
break;
|
||
|
|
case self.constants.ONE2POINT:
|
||
|
|
formatter = '#0.0';
|
||
|
|
if (numSeparators) formatter = '#,###.0';
|
||
|
|
break;
|
||
|
|
case self.constants.TWO2POINT:
|
||
|
|
formatter = '#0.00';
|
||
|
|
if (numSeparators) formatter = '#,###.00';
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
switch (numberLevel) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
formatter += '';
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
formatter += BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
formatter += BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
formatter += BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.PERCENT:
|
||
|
|
formatter += '%';
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
return formatter + unit;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getRangeStyle(styles, change, defaultColor) {
|
||
|
|
var range = [], color = null, defaultStyle = {};
|
||
|
|
var conditionMax = null, conditionMin = null, min = null;
|
||
|
|
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item.data, function (id, it) {
|
||
|
|
if (BI.isNull(min) || BI.parseFloat(min) > BI.parseFloat(it.y)) {
|
||
|
|
min = it.y
|
||
|
|
}
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
switch (change) {
|
||
|
|
case BICst.SCALE_SETTING.AUTO:
|
||
|
|
defaultStyle.color = defaultColor;
|
||
|
|
return defaultStyle;
|
||
|
|
case BICst.SCALE_SETTING.CUSTOM:
|
||
|
|
if (styles.length !== 0) {
|
||
|
|
var maxScale = _calculateValueNiceDomain(0, self.max)[1];
|
||
|
|
BI.each(styles, function (idx, style) {
|
||
|
|
if (style.range.max) {
|
||
|
|
range.push({
|
||
|
|
color: style.color || "rgba(255,255,255,0)",
|
||
|
|
from: style.range.min,
|
||
|
|
to: style.range.max
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
var to = style.range.min < maxScale ? maxScale : 266396;
|
||
|
|
range.push({
|
||
|
|
color: style.color || "rgba(255,255,255,0)",
|
||
|
|
from: style.range.min,
|
||
|
|
to: to,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
color = style.color;
|
||
|
|
conditionMax = style.range.max
|
||
|
|
});
|
||
|
|
|
||
|
|
conditionMin = BI.parseFloat(styles[0].range.min);
|
||
|
|
if (conditionMin !== 0) {
|
||
|
|
range.push({
|
||
|
|
color: "#808080",
|
||
|
|
from: 0,
|
||
|
|
to: conditionMin
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (conditionMax && conditionMax < maxScale) {
|
||
|
|
range.push({
|
||
|
|
color: color || "rgba(255,255,255,0)",
|
||
|
|
from: conditionMax,
|
||
|
|
to: maxScale
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return range;
|
||
|
|
} else {
|
||
|
|
defaultStyle.color = defaultColor;
|
||
|
|
return defaultStyle;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function _calculateValueNiceDomain(minValue, maxValue) {
|
||
|
|
minValue = Math.min(0, minValue);
|
||
|
|
var tickInterval = _linearTickInterval(minValue, maxValue);
|
||
|
|
|
||
|
|
return _linearNiceDomain(minValue, maxValue, tickInterval);
|
||
|
|
}
|
||
|
|
|
||
|
|
function _linearTickInterval(minValue, maxValue, m) {
|
||
|
|
m = m || 5;
|
||
|
|
var span = maxValue - minValue;
|
||
|
|
var step = Math.pow(10, Math.floor(Math.log(span / m) / Math.LN10));
|
||
|
|
var err = m / span * step;
|
||
|
|
|
||
|
|
if (err <= .15) step *= 10; else if (err <= .35) step *= 5; else if (err <= .75) step *= 2;
|
||
|
|
|
||
|
|
return step;
|
||
|
|
}
|
||
|
|
|
||
|
|
function _linearNiceDomain(minValue, maxValue, tickInterval) {
|
||
|
|
minValue = VanUtils.accMul(Math.floor(minValue / tickInterval), tickInterval);
|
||
|
|
maxValue = VanUtils.accMul(Math.ceil(maxValue / tickInterval), tickInterval);
|
||
|
|
|
||
|
|
return [minValue, maxValue];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatDrillItems: function (items) {
|
||
|
|
var self = this;
|
||
|
|
BI.each(items.series, function (idx, da) {
|
||
|
|
var hasArea = false;
|
||
|
|
BI.each(da.data, function (idx, data) {
|
||
|
|
data.y = self.formatXYDataWithMagnify(data.y, 1);
|
||
|
|
if (BI.has(da, "settings")) {
|
||
|
|
data.y = self.formatXYDataWithMagnify(data.y, self.calcMagnify(da.settings.num_level || self.constants.NORMAL));
|
||
|
|
}
|
||
|
|
if (BI.has(da, "type") && da.type == "bubble") {
|
||
|
|
data.name = data.x;
|
||
|
|
data.size = data.y;
|
||
|
|
} else {
|
||
|
|
data.name = data.x;
|
||
|
|
data.value = data.y;
|
||
|
|
}
|
||
|
|
if (BI.has(da, "type") && da.type === "areaMap") {
|
||
|
|
hasArea = true;
|
||
|
|
}
|
||
|
|
if (BI.has(data, "drilldown")) {
|
||
|
|
self._formatDrillItems(data.drilldown);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (hasArea === false) {
|
||
|
|
items.series.push({
|
||
|
|
type: "areaMap",
|
||
|
|
data: []
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (items) {
|
||
|
|
var self = this;
|
||
|
|
this.max = null;
|
||
|
|
this.min = null;
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item, function (id, it) {
|
||
|
|
BI.each(it.data, function (i, da) {
|
||
|
|
da.y = self.formatXYDataWithMagnify(da.y, 1);
|
||
|
|
if (BI.has(it, "settings")) {
|
||
|
|
da.y = self.formatXYDataWithMagnify(da.y, self.calcMagnify(it.settings.num_level || self.constants.NORMAL));
|
||
|
|
}
|
||
|
|
if ((BI.isNull(self.max) || BI.parseFloat(da.y) > BI.parseFloat(self.max)) && id === 0) {
|
||
|
|
self.max = da.y;
|
||
|
|
}
|
||
|
|
if ((BI.isNull(self.min) || BI.parseFloat(da.y) < BI.parseFloat(self.min)) && id === 0) {
|
||
|
|
self.min = da.y;
|
||
|
|
}
|
||
|
|
if (BI.has(it, "type") && it.type == "bubble") {
|
||
|
|
da.name = da.x;
|
||
|
|
da.size = da.y;
|
||
|
|
} else {
|
||
|
|
da.name = da.x;
|
||
|
|
da.value = da.y;
|
||
|
|
}
|
||
|
|
if (BI.has(da, "drilldown")) {
|
||
|
|
self._formatDrillItems(da.drilldown);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
});
|
||
|
|
return items;
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
geo: options.geo,
|
||
|
|
initDrillPath: options.initDrillPath || [],
|
||
|
|
tooltip: options.tooltip || "",
|
||
|
|
themeColor: options.themeColor || "#65bce7",
|
||
|
|
mapStyles: options.mapStyles || [],
|
||
|
|
autoCustom: options.autoCustom || c.AUTO_CUSTOM,
|
||
|
|
showBackgroundLayer: options.showBackgroundLayer || false,
|
||
|
|
backgroundLayerInfo: options.backgroundLayerInfo,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.MAP);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(this._formatItems(items), types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.MapChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.MapChart.EVENT_CLICK_DTOOL = "EVENT_CLICK_DTOOL";
|
||
|
|
BI.shortcut('bi.map_chart', BI.MapChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.MultiAxisChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
* leftYxis 左值轴属性
|
||
|
|
* rightYxis 右值轴属性
|
||
|
|
* xAxis 分类轴属性
|
||
|
|
*/
|
||
|
|
BI.MultiAxisChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.MultiAxisChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-multi-axis-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.MultiAxisChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: {"fontFamily": "inherit", "color": "#808080", "fontSize": "12px", "fontWeight": ""}
|
||
|
|
},
|
||
|
|
labelStyle: {
|
||
|
|
"fontFamily": "inherit", "color": "#808080", "fontSize": "12px"
|
||
|
|
},
|
||
|
|
position: "bottom",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.MultiAxisChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this, o = this.options;
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = this.formatChartStyle();
|
||
|
|
this.formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.connectNulls = this.config.nullContinue;
|
||
|
|
config.dataSheet.enabled = this.config.showDataTable;
|
||
|
|
config.xAxis[0].showLabel = !config.dataSheet.enabled;
|
||
|
|
config.zoom.zoomTool.enabled = this.config.showZoom;
|
||
|
|
if (this.config.showZoom === true) {
|
||
|
|
delete config.dataSheet;
|
||
|
|
delete config.zoom.zoomType;
|
||
|
|
}
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
BI.each(config.yAxis, function (idx, axis) {
|
||
|
|
var title = "";
|
||
|
|
switch (axis.axisIndex) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
title = self.getXYAxisUnit(self.config.leftYAxisNumberLevel, self.constants.LEFT_AXIS);
|
||
|
|
axis.title.text = self.config.showLeftYAxisTitle === true ? self.config.leftYAxisTitle + title : title;
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.leftYAxisReversed,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.leftYAxisStyle, self.config.leftYAxisNumberLevel, self.config.numSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.leftYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
title = self.getXYAxisUnit(self.config.rightYAxisNumberLevel, self.constants.RIGHT_AXIS);
|
||
|
|
axis.title.text = self.config.showRightYAxisTitle === true ? self.config.rightYAxisTitle + title : title;
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.rightYAxisReversed,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.rightYAxisStyle, self.config.rightYAxisNumberLevel, self.config.rightNumSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.rightYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
title = self.getXYAxisUnit(self.config.rightYAxisSecondNumberLevel, self.constants.RIGHT_AXIS_SECOND);
|
||
|
|
axis.title.text = self.config.showRightYAxisSecondTitle === true ? self.config.rightYAxisSecondTitle + title : title;
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.rightYAxisSecondReversed,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.rightYAxisSecondStyle, self.config.rightYAxisSecondNumberLevel, self.config.rightNumSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.rightYAxisSecondNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
config.xAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle : "";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
enableMinorTick: this.config.enableMinorTick,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
maxHeight: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabel(config.plotOptions.dataLabels.enabled, items, config, this.config.chartFont);
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
if (config.dataSheet) {
|
||
|
|
config.dataSheet.style = this.config.chartFont;
|
||
|
|
}
|
||
|
|
config.xAxis[0].title.style = config.xAxis[0].labelStyle = this.config.chartFont;
|
||
|
|
config.legend.style = this.config.chartFont;
|
||
|
|
config.plotOptions.dataLabels.style = this.config.chartFont;
|
||
|
|
BI.each(config.yAxis, function (idx, axis) {
|
||
|
|
axis.title.style = self.config.chartFont;
|
||
|
|
});
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
},
|
||
|
|
|
||
|
|
formatChartStyle: function () {
|
||
|
|
switch (this.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
formatCordon: function () {
|
||
|
|
var self = this;
|
||
|
|
var magnify = 1;
|
||
|
|
BI.each(this.config.cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style": {
|
||
|
|
"fontFamily": "inherit",
|
||
|
|
"color": "#808080",
|
||
|
|
"fontSize": "12px",
|
||
|
|
"fontWeight": ""
|
||
|
|
},
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style": {
|
||
|
|
"fontFamily": "inherit",
|
||
|
|
"color": "#808080",
|
||
|
|
"fontSize": "12px",
|
||
|
|
"fontWeight": ""
|
||
|
|
},
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
getXYAxisUnit: function (numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === this.constants.X_AXIS) {
|
||
|
|
this.config.xAxisUnit !== "" && (unit = unit + this.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === this.constants.LEFT_AXIS) {
|
||
|
|
this.config.leftYAxisUnit !== "" && (unit = unit + this.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === this.constants.RIGHT_AXIS) {
|
||
|
|
this.config.rightYAxisUnit !== "" && (unit = unit + this.config.rightYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === this.constants.RIGHT_AXIS_SECOND) {
|
||
|
|
this.config.rightYAxisSecondUnit !== "" && (unit = unit + this.config.rightYAxisSecondUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options, types) {
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
rightYAxisTitle: options.rightYAxisTitle || "",
|
||
|
|
rightYAxisSecondTitle: options.rightYAxisSecondTitle || "",
|
||
|
|
chartColor: options.chartColor || ["#5caae4", "#70cc7f", "#ebbb67", "#e97e7b", "#6ed3c9"],
|
||
|
|
chartStyle: options.chartStyle || c.NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
rightYAxisStyle: options.rightYAxisStyle || c.NORMAL,
|
||
|
|
rightYAxisSecondStyle: options.rightYAxisSecondStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
showRightYAxisTitle: options.showRightYAxisTitle || false,
|
||
|
|
showRightYAxisSecondTitle: options.showRightYAxisSecondTitle || false,
|
||
|
|
leftYAxisReversed: options.leftYAxisReversed || false,
|
||
|
|
rightYAxisReversed: options.rightYAxisReversed || false,
|
||
|
|
rightYAxisSecondReversed: options.rightYAxisSecondReversed || false,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
rightYAxisNumberLevel: options.rightYAxisNumberLevel || c.NORMAL,
|
||
|
|
rightYAxisSecondNumberLevel: options.rightYAxisSecondNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
rightYAxisUnit: options.rightYAxisUnit || "",
|
||
|
|
rightYAxisSecondUnit: options.rightYAxisSecondUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showDataTable: options.showDataTable || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
showZoom: options.showZoom || false,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
rightNumSeparators: options.rightNumSeparators || false,
|
||
|
|
rightNumSeparators: options.rightNumSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE,
|
||
|
|
nullContinue: options.nullContinue || false
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
|
||
|
|
this.yAxis = [];
|
||
|
|
BI.each(types, function (idx, type) {
|
||
|
|
if (BI.isEmptyArray(type)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var newYAxis = {
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: {"fontFamily": "inherit", "color": "#808080", "fontSize": "12px", "fontWeight": ""}
|
||
|
|
},
|
||
|
|
labelStyle: {
|
||
|
|
"fontFamily": "inherit", "color": "#808080", "fontSize": "12px"
|
||
|
|
},
|
||
|
|
position: idx > 0 ? "right" : "left",
|
||
|
|
lineWidth: 1,
|
||
|
|
axisIndex: idx,
|
||
|
|
gridLineWidth: 0
|
||
|
|
};
|
||
|
|
self.yAxis.push(newYAxis);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(items, types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.MultiAxisChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.multi_axis_chart', BI.MultiAxisChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.MultiAxisChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
* leftYxis 左值轴属性
|
||
|
|
* rightYxis 右值轴属性
|
||
|
|
* xAxis 分类轴属性
|
||
|
|
*/
|
||
|
|
BI.MultiAxisCombineChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.MultiAxisCombineChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-multi-axis-combine-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.MultiAxisCombineChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: {"fontFamily": "inherit", "color": "#808080", "fontSize": "12px", "fontWeight": ""}
|
||
|
|
},
|
||
|
|
labelStyle: {
|
||
|
|
"fontFamily": "inherit", "color": "#808080", "fontSize": "12px"
|
||
|
|
},
|
||
|
|
position: "bottom",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.MultiAxisCombineChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this, o = this.options;
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = this.formatChartStyle();
|
||
|
|
this.formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.connectNulls = this.config.nullContinue;
|
||
|
|
config.dataSheet.enabled = this.config.showDataTable;
|
||
|
|
config.xAxis[0].showLabel = !config.dataSheet.enabled;
|
||
|
|
config.zoom.zoomTool.enabled = this.config.showZoom;
|
||
|
|
if (this.config.showZoom === true) {
|
||
|
|
delete config.dataSheet;
|
||
|
|
delete config.zoom.zoomType;
|
||
|
|
}
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
BI.each(config.yAxis, function (idx, axis) {
|
||
|
|
var title = "";
|
||
|
|
switch (axis.axisIndex) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
title = self.getXYAxisUnit(self.config.leftYAxisNumberLevel, self.constants.LEFT_AXIS);
|
||
|
|
axis.title.text = self.config.showLeftYAxisTitle === true ? self.config.leftYAxisTitle + title : title;
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
axis.labelStyle.color = axis.lineColor = axis.tickColor = config.colors[0];
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.leftYAxisReversed,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.leftYAxisStyle, self.config.leftYAxisNumberLevel, self.config.numSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.leftYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
title = self.getXYAxisUnit(self.config.rightYAxisNumberLevel, self.constants.RIGHT_AXIS);
|
||
|
|
axis.title.text = self.config.showRightYAxisTitle === true ? self.config.rightYAxisTitle + title : title;
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
axis.labelStyle.color = axis.lineColor = axis.tickColor = config.colors[1];
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.rightYAxisReversed,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.rightYAxisStyle, self.config.rightYAxisNumberLevel, self.config.rightNumSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.rightYAxisNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
title = self.getXYAxisUnit(self.config.rightYAxisSecondNumberLevel, self.constants.RIGHT_AXIS_SECOND);
|
||
|
|
axis.title.text = self.config.showRightYAxisSecondTitle === true ? self.config.rightYAxisSecondTitle + title : title;
|
||
|
|
axis.title.rotation = self.constants.ROTATION;
|
||
|
|
axis.labelStyle.color = axis.lineColor = axis.tickColor = config.colors[2];
|
||
|
|
BI.extend(axis, {
|
||
|
|
lineWidth: self.config.lineWidth,
|
||
|
|
showLabel: self.config.showLabel,
|
||
|
|
enableTick: self.config.enableTick,
|
||
|
|
reversed: self.config.rightYAxisSecondReversed,
|
||
|
|
enableMinorTick: self.config.enableMinorTick,
|
||
|
|
gridLineWidth: self.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(self.config.rightYAxisSecondStyle, self.config.rightYAxisSecondNumberLevel, self.config.rightNumSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, self.config.rightYAxisSecondNumberLevel, idx, axis.formatter);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
config.xAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle : "";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
enableMinorTick: this.config.enableMinorTick,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
maxHeight: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabel(config.plotOptions.dataLabels.enabled, items, config, this.config.chartFont);
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
if (config.dataSheet) {
|
||
|
|
config.dataSheet.style = this.config.chartFont;
|
||
|
|
}
|
||
|
|
config.xAxis[0].title.style = config.xAxis[0].labelStyle = this.config.chartFont;
|
||
|
|
config.legend.style = this.config.chartFont;
|
||
|
|
config.plotOptions.dataLabels.style = this.config.chartFont;
|
||
|
|
BI.each(config.yAxis, function (idx, axis) {
|
||
|
|
axis.title.style = self.config.chartFont;
|
||
|
|
});
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
},
|
||
|
|
|
||
|
|
formatChartStyle: function () {
|
||
|
|
switch (this.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
formatCordon: function () {
|
||
|
|
var self = this;
|
||
|
|
var magnify = 1;
|
||
|
|
BI.each(this.config.cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style": {
|
||
|
|
"fontFamily": "inherit",
|
||
|
|
"color": "#808080",
|
||
|
|
"fontSize": "12px",
|
||
|
|
"fontWeight": ""
|
||
|
|
},
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style": {
|
||
|
|
"fontFamily": "inherit",
|
||
|
|
"color": "#808080",
|
||
|
|
"fontSize": "12px",
|
||
|
|
"fontWeight": ""
|
||
|
|
},
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
getXYAxisUnit: function (numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === this.constants.X_AXIS) {
|
||
|
|
this.config.xAxisUnit !== "" && (unit = unit + this.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === this.constants.LEFT_AXIS) {
|
||
|
|
this.config.leftYAxisUnit !== "" && (unit = unit + this.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === this.constants.RIGHT_AXIS) {
|
||
|
|
this.config.rightYAxisUnit !== "" && (unit = unit + this.config.rightYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === this.constants.RIGHT_AXIS_SECOND) {
|
||
|
|
this.config.rightYAxisSecondUnit !== "" && (unit = unit + this.config.rightYAxisSecondUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options, types) {
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
rightYAxisTitle: options.rightYAxisTitle || "",
|
||
|
|
rightYAxisSecondTitle: options.rightYAxisSecondTitle || "",
|
||
|
|
chartColor: options.chartColor || ["#5caae4", "#70cc7f", "#ebbb67", "#e97e7b", "#6ed3c9"],
|
||
|
|
chartStyle: options.chartStyle || c.NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
rightYAxisStyle: options.rightYAxisStyle || c.NORMAL,
|
||
|
|
rightYAxisSecondStyle: options.rightYAxisSecondStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
showRightYAxisTitle: options.showRightYAxisTitle || false,
|
||
|
|
showRightYAxisSecondTitle: options.showRightYAxisSecondTitle || false,
|
||
|
|
leftYAxisReversed: options.leftYAxisReversed || false,
|
||
|
|
rightYAxisReversed: options.rightYAxisReversed || false,
|
||
|
|
rightYAxisSecondReversed: options.rightYAxisSecondReversed || false,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
rightYAxisNumberLevel: options.rightYAxisNumberLevel || c.NORMAL,
|
||
|
|
rightYAxisSecondNumberLevel: options.rightYAxisSecondNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
rightYAxisUnit: options.rightYAxisUnit || "",
|
||
|
|
rightYAxisSecondUnit: options.rightYAxisSecondUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showDataTable: options.showDataTable || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
showZoom: options.showZoom || false,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
rightNumSeparators: options.rightNumSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE,
|
||
|
|
nullContinue: options.nullContinue || false
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
|
||
|
|
this.yAxis = [];
|
||
|
|
BI.each(types, function (idx, type) {
|
||
|
|
if (BI.isEmptyArray(type)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var newYAxis = {
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: {"fontFamily": "inherit", "color": "#808080", "fontSize": "12px", "fontWeight": ""}
|
||
|
|
},
|
||
|
|
labelStyle: {
|
||
|
|
"fontFamily": "inherit", "color": "#808080", "fontSize": "12px"
|
||
|
|
},
|
||
|
|
position: idx > 0 ? "right" : "left",
|
||
|
|
lineWidth: 1,
|
||
|
|
axisIndex: idx,
|
||
|
|
gridLineWidth: 0
|
||
|
|
};
|
||
|
|
self.yAxis.push(newYAxis);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(items, types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.MultiAxisCombineChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.multi_axis_combine_chart', BI.MultiAxisCombineChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.PercentAccumulateAreaChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.PercentAccumulateAreaChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.PercentAccumulateAreaChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-percent-accumulate-area-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.PercentAccumulateAreaChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "bottom",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.yAxis = [{
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "left",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.PercentAccumulateAreaChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this;
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.connectNulls = this.config.nullContinue;
|
||
|
|
config.dataSheet.enabled = this.config.showDataTable;
|
||
|
|
config.xAxis[0].showLabel = !config.dataSheet.enabled;
|
||
|
|
config.zoom.zoomTool.enabled = this.config.showZoom;
|
||
|
|
if (this.config.showZoom === true) {
|
||
|
|
delete config.dataSheet;
|
||
|
|
delete config.zoom.zoomType;
|
||
|
|
}
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
config.yAxis[0].title.text = getXYAxisUnit(this.config.leftYAxisNumberLevel, this.constants.LEFT_AXIS);
|
||
|
|
config.yAxis[0].title.rotation = this.constants.ROTATION;
|
||
|
|
BI.extend(config.yAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
showLabel: this.config.showLabel,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
reversed: this.config.leftYAxisReversed,
|
||
|
|
enableMinorTick: this.config.enableMinorTick,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(this.config.leftYAxisStyle, this.config.leftYAxisNumberLevel, this.config.numSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, this.config.leftYAxisNumberLevel, this.constants.LEFT_AXIS, config.yAxis[0].formatter, true);
|
||
|
|
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
config.xAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle : "";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
maxHeight: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
config.chartType = "area";
|
||
|
|
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabelForAxis(config.plotOptions.dataLabels.enabled, items, config.yAxis[0].formatter, this.config.chartFont, true);
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
this.setFontStyle(this.config.chartFont, config);
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle() {
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCordon() {
|
||
|
|
BI.each(self.config.cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
var magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style": self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style": self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.X_AXIS) {
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.LEFT_AXIS) {
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
|
||
|
|
unit = unit === "" ? unit : "(" + unit + ")";
|
||
|
|
|
||
|
|
return self.config.showLeftYAxisTitle === true ? self.config.leftYAxisTitle + unit : unit
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (items) {
|
||
|
|
return BI.map(items, function (idx, item) {
|
||
|
|
var i = BI.UUID();
|
||
|
|
return BI.map(item, function (id, it) {
|
||
|
|
return BI.extend({}, it, {stack: i, stackByPercent: true});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
leftYAxisReversed: options.leftYAxisReversed || false,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showDataTable: options.showDataTable || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
showZoom: options.showZoom || false,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE,
|
||
|
|
nullContinue: options.nullContinue || false
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.AREA);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(this._formatItems(items), types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.PercentAccumulateAreaChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.percent_accumulate_area_chart', BI.PercentAccumulateAreaChart);/**
|
||
|
|
* 图表控件 百分比堆积柱状
|
||
|
|
* @class BI.PercentAccumulateAxisChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.PercentAccumulateAxisChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.PercentAccumulateAxisChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-percent-accumulate-axis-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.PercentAccumulateAxisChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "bottom",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.yAxis = [{
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: self.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: self.constants.FONT_STYLE,
|
||
|
|
position: "left",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.PercentAccumulateAxisChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this, o = this.options;
|
||
|
|
var yTitle = getXYAxisUnit(this.config.leftYAxisNumberLevel, this.constants.LEFT_AXIS);
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.dataSheet.enabled = this.config.showDataTable;
|
||
|
|
config.xAxis[0].showLabel = !config.dataSheet.enabled;
|
||
|
|
config.zoom.zoomTool.enabled = this.config.showZoom;
|
||
|
|
if (this.config.showZoom === true) {
|
||
|
|
delete config.dataSheet;
|
||
|
|
delete config.zoom.zoomType;
|
||
|
|
}
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
config.yAxis[0].title.rotation = this.constants.ROTATION;
|
||
|
|
config.yAxis[0].title.text = this.config.showLeftYAxisTitle === true ? this.config.leftYAxisTitle + yTitle : yTitle;
|
||
|
|
BI.extend(config.yAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
showLabel: this.config.showLabel,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
reversed: this.config.leftYAxisReversed,
|
||
|
|
enableMinorTick: this.config.enableMinorTick,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
formatter: self.formatTickInXYaxis(this.config.leftYAxisStyle, this.config.leftYAxisNumberLevel, this.config.numSeparators)
|
||
|
|
});
|
||
|
|
self.formatNumberLevelInYaxis(config, items, this.config.leftYAxisNumberLevel, this.constants.LEFT_AXIS, config.yAxis[0].formatter, true);
|
||
|
|
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
config.xAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle : "";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
enableMinorTick: this.config.enableMinorTick,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
maxHeight: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabelForAxis(config.plotOptions.dataLabels.enabled, items, config.yAxis[0].formatter, this.config.chartFont, true);
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
this.setFontStyle(this.config.chartFont, config);
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle() {
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCordon() {
|
||
|
|
BI.each(self.config.cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
var magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.X_AXIS) {
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.LEFT_AXIS) {
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (items) {
|
||
|
|
return BI.map(items, function (idx, item) {
|
||
|
|
var i = BI.UUID();
|
||
|
|
return BI.map(item, function (id, it) {
|
||
|
|
return BI.extend({}, it, {stack: i, stackByPercent: true});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
leftYAxisReversed: options.leftYAxisReversed || false,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showDataTable: options.showDataTable || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
showZoom: options.showZoom || false,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.AXIS);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(this._formatItems(items), types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.PercentAccumulateAxisChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.percent_accumulate_axis_chart', BI.PercentAccumulateAxisChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.PieChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.PieChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.PieChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-pie-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.PieChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.PieChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function(config, items){
|
||
|
|
var self = this, o = this.options;
|
||
|
|
delete config.zoom;
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatChartPieStyle();
|
||
|
|
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.tooltip.formatter.identifier = "${CATEGORY}${SERIES}${VALUE}${PERCENT}";
|
||
|
|
|
||
|
|
config.chartType = "pie";
|
||
|
|
delete config.xAxis;
|
||
|
|
delete config.yAxis;
|
||
|
|
config.plotOptions.dataLabels.align = "outside";
|
||
|
|
config.plotOptions.dataLabels.connectorWidth = "outside";
|
||
|
|
config.plotOptions.dataLabels.formatter.identifier = "${VALUE}${PERCENT}";
|
||
|
|
config.plotOptions.dataLabels.style = this.config.chartFont;
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
da.y = self.formatXYDataWithMagnify(da.y, 1);
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
config.legend.style = this.config.chartFont;
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle(){
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatChartPieStyle(){
|
||
|
|
switch (self.config.chartPieType){
|
||
|
|
case BICst.CHART_SHAPE.EQUAL_ARC_ROSE:
|
||
|
|
config.plotOptions.roseType = "sameArc";
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.NOT_EQUAL_ARC_ROSE:
|
||
|
|
config.plotOptions.roseType = "differentArc";
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.NORMAL:
|
||
|
|
default:
|
||
|
|
delete config.plotOptions.roseType;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
config.plotOptions.innerRadius = self.config.chartInnerRadius + "%";
|
||
|
|
config.plotOptions.endAngle = self.config.chartTotalAngle;
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
//目前饼图不会有多个系列，如果有多个就要把它们合并在一起
|
||
|
|
_isNeedConvert: function(items){
|
||
|
|
var result = BI.find(items, function(idx, item){
|
||
|
|
return item.length > 1;
|
||
|
|
});
|
||
|
|
return BI.isNotNull(result);
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function(items){
|
||
|
|
if(this._isNeedConvert(items)){
|
||
|
|
//把每个坐标轴所有的多个系列合并成一个系列
|
||
|
|
return BI.map(items, function(idx, item){
|
||
|
|
var seriesItem = [];
|
||
|
|
var obj = {data: [], name: ""};
|
||
|
|
seriesItem.push(obj);
|
||
|
|
BI.each(item, function(id, series){
|
||
|
|
BI.each(series.data, function(i, da){
|
||
|
|
obj.data.push(BI.extend({}, da, {x: series.name}));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return seriesItem;
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
return items;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.NORMAL,
|
||
|
|
chartPieType: options.chartPieType || c.NORMAL,
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
chartInnerRadius: options.chartInnerRadius || 0,
|
||
|
|
chartTotalAngle: options.chartTotalAngle || BICst.PIE_ANGLES.TOTAL,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function(idx, axisItems){
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function(id, item){
|
||
|
|
type.push(BICst.WIDGET.PIE);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.combineChart.populate(this._formatItems(items), types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function(){
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.PieChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.pie_chart', BI.PieChart);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.RadarChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.RadarChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.RadarChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-radar-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.RadarChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.radiusAxis = [{
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
formatter: function () {
|
||
|
|
return this > 0 ? this : (-1) * this
|
||
|
|
},
|
||
|
|
gridLineWidth: 0,
|
||
|
|
position: "bottom"
|
||
|
|
}];
|
||
|
|
|
||
|
|
this.angleAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE
|
||
|
|
}];
|
||
|
|
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.RadarChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
delete config.zoom;
|
||
|
|
|
||
|
|
var title = getXYAxisUnit(this.config.leftYAxisNumberLevel, this.constants.LEFT_AXIS);
|
||
|
|
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatChartRadarStyle();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.connectNulls = this.config.nullContinue;
|
||
|
|
|
||
|
|
config.radiusAxis = this.radiusAxis;
|
||
|
|
config.angleAxis = this.angleAxis;
|
||
|
|
config.radiusAxis[0].formatter = self.formatTickInXYaxis(this.config.leftYAxisStyle, this.config.leftYAxisNumberLevel, this.config.numSeparators);
|
||
|
|
formatNumberLevelInYaxis(this.config.leftYAxisNumberLevel, this.constants.LEFT_AXIS, config.radiusAxis[0].formatter);
|
||
|
|
config.radiusAxis[0].title.text = this.config.showLeftYAxisTitle === true ? this.config.leftYAxisTitle + title : title;
|
||
|
|
config.radiusAxis[0].gridLineWidth = this.config.showGridLine === true ? 1 : 0;
|
||
|
|
config.chartType = "radar";
|
||
|
|
delete config.xAxis;
|
||
|
|
delete config.yAxis;
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabelForAxis(config.plotOptions.dataLabels.enabled, items, config.radiusAxis[0].formatter, this.config.chartFont);
|
||
|
|
|
||
|
|
//全局样式
|
||
|
|
config.legend.style = this.config.chartFont;
|
||
|
|
config.radiusAxis[0].title.style = config.radiusAxis[0].labelStyle = this.config.chartFont;
|
||
|
|
config.angleAxis[0].title.style = config.angleAxis[0].labelStyle = this.config.chartFont;
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle() {
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatChartRadarStyle() {
|
||
|
|
switch (self.config.chartRadarType) {
|
||
|
|
case BICst.CHART_SHAPE.POLYGON:
|
||
|
|
config.plotOptions.shape = "polygon";
|
||
|
|
break;
|
||
|
|
case BICst.CHART_SHAPE.CIRCLE:
|
||
|
|
config.plotOptions.shape = "circle";
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatNumberLevelInYaxis(type, position, formatter) {
|
||
|
|
var magnify = self.calcMagnify(type);
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
if (position === item.yAxis) {
|
||
|
|
da.y = self.formatXYDataWithMagnify(da.y, magnify);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
});
|
||
|
|
config.plotOptions.tooltip.formatter.valueFormat = formatter;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.X_AXIS) {
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.LEFT_AXIS) {
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.RIGHT_AXIS) {
|
||
|
|
self.config.rightYAxisUnit !== "" && (unit = unit + self.config.rightYAxisUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
chartRadarType: options.chartRadarType || c.POLYGON,
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.STYLE_NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE,
|
||
|
|
nullContinue: options.nullContinue || false
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.RADAR);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
this.combineChart.populate(items, types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.RadarChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.radar_chart', BI.RadarChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.RangeAreaChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
* 范围面积图的构造范围的两组item的必须有对应y值item1完全大于item2
|
||
|
|
*/
|
||
|
|
BI.RangeAreaChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.RangeAreaChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-range-area-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.RangeAreaChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "category",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "bottom",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.yAxis = [{
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "left",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.RangeAreaChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this;
|
||
|
|
var title = getXYAxisUnit(this.config.leftYAxisNumberLevel, this.constants.LEFT_AXIS);
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.connectNulls = this.config.nullContinue;
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
config.yAxis[0].title.rotation = this.constants.ROTATION;
|
||
|
|
config.yAxis[0].title.text = this.config.showLeftYAxisTitle === true ? this.config.leftYAxisTitle + title : title;
|
||
|
|
BI.extend(config.yAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
showLabel: this.config.showLabel,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
enableMinorTick: this.config.enableMinorTick,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
reversed: config.yAxis[0].reversed = this.config.leftYAxisReversed,
|
||
|
|
formatter: self.formatTickInXYaxis(this.config.leftYAxisStyle, this.config.leftYAxisNumberLevel, this.config.numSeparators)
|
||
|
|
});
|
||
|
|
formatNumberLevelInYaxis(this.config.leftYAxisNumberLevel, this.constants.LEFT_AXIS, config.yAxis[0].formatter);
|
||
|
|
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
config.xAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle : "";
|
||
|
|
BI.extend(config.xAxis[0], {
|
||
|
|
lineWidth: this.config.lineWidth,
|
||
|
|
enableTick: this.config.enableTick,
|
||
|
|
labelRotation: this.config.textDirection,
|
||
|
|
gridLineWidth: this.config.showGridLine === true ? 1 : 0,
|
||
|
|
maxHeight: '40%'
|
||
|
|
});
|
||
|
|
|
||
|
|
config.chartType = "area";
|
||
|
|
config.plotOptions.tooltip.formatter.identifier = "${CATEGORY}${VALUE}";
|
||
|
|
|
||
|
|
//为了给数据标签加个%,还要遍历所有的系列，唉
|
||
|
|
this.formatDataLabelForAxis(config.plotOptions.dataLabels.enabled, items, config.yAxis[0].formatter, this.config.chartFont);
|
||
|
|
|
||
|
|
//全局样式的图表文字
|
||
|
|
this.setFontStyle(this.config.chartFont, config);
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle() {
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCordon() {
|
||
|
|
BI.each(self.config.cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
var magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style" : self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatNumberLevelInYaxis(type, position, formatter) {
|
||
|
|
var magnify = self.calcMagnify(type);
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
if (position === item.yAxis) {
|
||
|
|
da.y = self.formatXYDataWithMagnify(da.y, magnify);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
});
|
||
|
|
config.plotOptions.tooltip.formatter.valueFormat = formatter;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.X_AXIS) {
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.LEFT_AXIS) {
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_formatItems: function (data) {
|
||
|
|
var o = this.options;
|
||
|
|
var items = [];
|
||
|
|
BI.each(data, function (idx, item) {
|
||
|
|
items = BI.concat(items, item);
|
||
|
|
});
|
||
|
|
if (BI.isEmptyArray(items)) {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
if (items.length === 1) {
|
||
|
|
return [items];
|
||
|
|
}
|
||
|
|
var colors = this.config.chartColor || [];
|
||
|
|
if (BI.isEmptyArray(colors)) {
|
||
|
|
colors = ["#5caae4"];
|
||
|
|
}
|
||
|
|
var seriesMinus = [];
|
||
|
|
BI.each(items[0].data, function (idx, item) {
|
||
|
|
var res = items[1].data[idx].y - item.y;
|
||
|
|
seriesMinus.push({
|
||
|
|
x: items[1].data[idx].x,
|
||
|
|
y: res,
|
||
|
|
targetIds: items[1].data[idx].targetIds
|
||
|
|
});
|
||
|
|
});
|
||
|
|
items[1] = {
|
||
|
|
data: seriesMinus,
|
||
|
|
name: items[1].name,
|
||
|
|
stack: "stackedArea",
|
||
|
|
fillColor: colors[0]
|
||
|
|
};
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
if (idx === 0) {
|
||
|
|
BI.extend(item, {
|
||
|
|
name: items[0].name,
|
||
|
|
fillColorOpacity: 0,
|
||
|
|
stack: "stackedArea",
|
||
|
|
marker: {enabled: false},
|
||
|
|
fillColor: "#000000"
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return [items];
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
chartStyle: options.chartStyle || c.NORMAL,
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
leftYAxisReversed: options.leftYAxisReversed || false,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
textDirection: options.textDirection || 0,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
lineWidth: BI.isNull(options.lineWidth) ? 1 : options.lineWidth,
|
||
|
|
showLabel: BI.isNull(options.showLabel) ? true : options.showLabel,
|
||
|
|
enableTick: BI.isNull(options.enableTick) ? true : options.enableTick,
|
||
|
|
enableMinorTick: BI.isNull(options.enableMinorTick) ? true : options.enableMinorTick,
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE,
|
||
|
|
nullContinue: options.nullContinue || false
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
|
||
|
|
var types = [];
|
||
|
|
var type = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
type.push(BICst.WIDGET.AREA);
|
||
|
|
});
|
||
|
|
if (BI.isNotEmptyArray(type)) {
|
||
|
|
types.push(type);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.combineChart.populate(this._formatItems(items), types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.RangeAreaChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.range_area_chart', BI.RangeAreaChart);/**
|
||
|
|
* 图表控件
|
||
|
|
* @class BI.ScatterChart
|
||
|
|
* @extends BI.Widget
|
||
|
|
*/
|
||
|
|
BI.ScatterChart = BI.inherit(BI.AbstractChart, {
|
||
|
|
|
||
|
|
_defaultConfig: function () {
|
||
|
|
return BI.extend(BI.ScatterChart.superclass._defaultConfig.apply(this, arguments), {
|
||
|
|
baseCls: "bi-scatter-chart"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
_init: function () {
|
||
|
|
BI.ScatterChart.superclass._init.apply(this, arguments);
|
||
|
|
var self = this, o = this.options;
|
||
|
|
this.xAxis = [{
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "bottom",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.yAxis = [{
|
||
|
|
type: "value",
|
||
|
|
title: {
|
||
|
|
style: this.constants.FONT_STYLE
|
||
|
|
},
|
||
|
|
labelStyle: this.constants.FONT_STYLE,
|
||
|
|
position: "left",
|
||
|
|
gridLineWidth: 0
|
||
|
|
}];
|
||
|
|
this.combineChart = BI.createWidget({
|
||
|
|
type: "bi.combine_chart",
|
||
|
|
xAxis: this.xAxis,
|
||
|
|
popupItemsGetter: o.popupItemsGetter,
|
||
|
|
formatConfig: BI.bind(this._formatConfig, this),
|
||
|
|
element: this.element
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_CHANGE, function (obj) {
|
||
|
|
self.fireEvent(BI.ScatterChart.EVENT_CHANGE, obj);
|
||
|
|
});
|
||
|
|
this.combineChart.on(BI.CombineChart.EVENT_ITEM_CLICK, function (obj) {
|
||
|
|
self.fireEvent(BI.AbstractChart.EVENT_ITEM_CLICK, obj)
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
_formatConfig: function (config, items) {
|
||
|
|
var self = this;
|
||
|
|
delete config.zoom;
|
||
|
|
config.colors = this.config.chartColor;
|
||
|
|
config.style = formatChartStyle();
|
||
|
|
config.plotOptions.marker = {"symbol": "circle", "radius": 4.5, "enabled": true};
|
||
|
|
formatCordon();
|
||
|
|
this.formatChartLegend(config, this.config.chartLegend);
|
||
|
|
config.plotOptions.dataLabels.enabled = this.config.showDataLabel;
|
||
|
|
config.plotOptions.dataLabels.formatter.identifier = "${X}${Y}";
|
||
|
|
|
||
|
|
config.yAxis = this.yAxis;
|
||
|
|
config.xAxis = this.xAxis;
|
||
|
|
|
||
|
|
config.yAxis[0].formatter = self.formatTickInXYaxis(this.config.leftYAxisStyle, this.config.leftYAxisNumberLevel, this.config.numSeparators);
|
||
|
|
formatNumberLevelInYaxis(this.config.leftYAxisNumberLevel);
|
||
|
|
config.yAxis[0].title.text = getXYAxisUnit(this.config.leftYAxisNumberLevel, this.constants.LEFT_AXIS);
|
||
|
|
config.yAxis[0].title.text = this.config.showLeftYAxisTitle === true ? this.config.leftYAxisTitle + config.yAxis[0].title.text : config.yAxis[0].title.text;
|
||
|
|
config.yAxis[0].gridLineWidth = this.config.showGridLine === true ? 1 : 0;
|
||
|
|
config.yAxis[0].title.rotation = this.constants.ROTATION;
|
||
|
|
config.yAxis[0].maxWidth = '40%';
|
||
|
|
|
||
|
|
config.xAxis[0].formatter = self.formatTickInXYaxis(this.config.xAxisStyle, this.config.xAxisNumberLevel, this.config.rightNumSeparators);
|
||
|
|
formatNumberLevelInXaxis(this.config.xAxisNumberLevel);
|
||
|
|
config.xAxis[0].title.text = getXYAxisUnit(this.config.xAxisNumberLevel, this.constants.X_AXIS);
|
||
|
|
config.xAxis[0].title.text = this.config.showXAxisTitle === true ? this.config.xAxisTitle + config.xAxis[0].title.text : config.xAxis[0].title.text;
|
||
|
|
config.xAxis[0].title.align = "center";
|
||
|
|
config.xAxis[0].gridLineWidth = this.config.showGridLine === true ? 1 : 0;
|
||
|
|
config.xAxis[0].maxHeight = '40%';
|
||
|
|
config.chartType = "scatter";
|
||
|
|
|
||
|
|
if (BI.isNotEmptyArray(this.config.tooltip)) {
|
||
|
|
config.plotOptions.tooltip.formatter = function () {
|
||
|
|
var y = self.formatTickInXYaxis(self.config.leftYAxisStyle, self.config.leftYAxisNumberLevel, self.config.numSeparators)(this.y);
|
||
|
|
var x = self.formatTickInXYaxis(self.config.xAxisStyle, self.config.xAxisNumberLevel, self.config.rightNumSeparators)(this.x);
|
||
|
|
return this.seriesName + '<div>(X)' + self.config.tooltip[0]
|
||
|
|
+ ':' + x + '</div><div>(Y)' + self.config.tooltip[1] + ':' + y + '</div>'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
if (config.plotOptions.dataLabels.enabled === true) {
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
item.dataLabels = {
|
||
|
|
"style": self.config.chartFont,
|
||
|
|
"align": "outside",
|
||
|
|
"autoAdjust": true,
|
||
|
|
enabled: true,
|
||
|
|
formatter: {
|
||
|
|
identifier: "${X}${Y}",
|
||
|
|
"XFormat": function () {
|
||
|
|
return BI.contentFormat(arguments[0], '#.##;-#.##')
|
||
|
|
},
|
||
|
|
"YFormat": function () {
|
||
|
|
return BI.contentFormat(arguments[0], '#.##;-#.##')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
item.dataLabels.formatter.XFormat = config.xAxis[0].formatter;
|
||
|
|
item.dataLabels.formatter.YFormat = config.yAxis[0].formatter;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//全局样式图表文字
|
||
|
|
config.legend.style = this.config.chartFont;
|
||
|
|
config.yAxis[0].title.style = config.yAxis[0].labelStyle = this.config.chartFont;
|
||
|
|
config.xAxis[0].title.style = config.xAxis[0].labelStyle = this.config.chartFont;
|
||
|
|
|
||
|
|
return [items, config];
|
||
|
|
|
||
|
|
function formatChartStyle() {
|
||
|
|
switch (self.config.chartStyle) {
|
||
|
|
case BICst.CHART_STYLE.STYLE_GRADUAL:
|
||
|
|
return "gradual";
|
||
|
|
case BICst.CHART_STYLE.STYLE_NORMAL:
|
||
|
|
default:
|
||
|
|
return "normal";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCordon() {
|
||
|
|
BI.each(self.config.cordon, function (idx, cor) {
|
||
|
|
if (idx === 0 && self.xAxis.length > 0) {
|
||
|
|
var magnify = self.calcMagnify(self.config.xAxisNumberLevel);
|
||
|
|
self.xAxis[0].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style": self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "top"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (idx > 0 && self.yAxis.length >= idx) {
|
||
|
|
var magnify = 1;
|
||
|
|
switch (idx - 1) {
|
||
|
|
case self.constants.LEFT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.leftYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisNumberLevel);
|
||
|
|
break;
|
||
|
|
case self.constants.RIGHT_AXIS_SECOND:
|
||
|
|
magnify = self.calcMagnify(self.config.rightYAxisSecondNumberLevel);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
self.yAxis[idx - 1].plotLines = BI.map(cor, function (i, t) {
|
||
|
|
return BI.extend(t, {
|
||
|
|
value: t.value.div(magnify),
|
||
|
|
width: 1,
|
||
|
|
label: {
|
||
|
|
"style": self.config.chartFont,
|
||
|
|
"text": t.text,
|
||
|
|
"align": "left"
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatNumberLevelInXaxis(type) {
|
||
|
|
var magnify = self.calcMagnify(type);
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
da.x = self.formatXYDataWithMagnify(da.x, magnify);
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatNumberLevelInYaxis(type) {
|
||
|
|
var magnify = self.calcMagnify(type);
|
||
|
|
BI.each(items, function (idx, item) {
|
||
|
|
BI.each(item.data, function (id, da) {
|
||
|
|
da.y = self.formatXYDataWithMagnify(da.y, magnify);
|
||
|
|
})
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function getXYAxisUnit(numberLevelType, position) {
|
||
|
|
var unit = "";
|
||
|
|
switch (numberLevelType) {
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.NORMAL:
|
||
|
|
unit = "";
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.TEN_THOUSAND:
|
||
|
|
unit = BI.i18nText("BI-Wan");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.MILLION:
|
||
|
|
unit = BI.i18nText("BI-Million");
|
||
|
|
break;
|
||
|
|
case BICst.TARGET_STYLE.NUM_LEVEL.YI:
|
||
|
|
unit = BI.i18nText("BI-Yi");
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (position === self.constants.X_AXIS) {
|
||
|
|
self.config.xAxisUnit !== "" && (unit = unit + self.config.xAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.LEFT_AXIS) {
|
||
|
|
self.config.leftYAxisUnit !== "" && (unit = unit + self.config.leftYAxisUnit)
|
||
|
|
}
|
||
|
|
if (position === self.constants.RIGHT_AXIS) {
|
||
|
|
self.config.rightYAxisUnit !== "" && (unit = unit + self.config.rightYAxisUnit)
|
||
|
|
}
|
||
|
|
return unit === "" ? unit : "(" + unit + ")";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
populate: function (items, options) {
|
||
|
|
options || (options = {});
|
||
|
|
var self = this, c = this.constants;
|
||
|
|
this.config = {
|
||
|
|
leftYAxisTitle: options.leftYAxisTitle || "",
|
||
|
|
chartColor: options.chartColor || [],
|
||
|
|
leftYAxisStyle: options.leftYAxisStyle || c.NORMAL,
|
||
|
|
xAxisStyle: options.xAxisStyle || c.NORMAL,
|
||
|
|
showXAxisTitle: options.showXAxisTitle || false,
|
||
|
|
showLeftYAxisTitle: options.showLeftYAxisTitle || false,
|
||
|
|
xAxisNumberLevel: options.xAxisNumberLevel || c.NORMAL,
|
||
|
|
leftYAxisNumberLevel: options.leftYAxisNumberLevel || c.NORMAL,
|
||
|
|
xAxisUnit: options.xAxisUnit || "",
|
||
|
|
leftYAxisUnit: options.leftYAxisUnit || "",
|
||
|
|
xAxisTitle: options.xAxisTitle || "",
|
||
|
|
chartLegend: options.chartLegend || c.LEGEND_BOTTOM,
|
||
|
|
showDataLabel: options.showDataLabel || false,
|
||
|
|
showGridLine: BI.isNull(options.showGridLine) ? true : options.showGridLine,
|
||
|
|
cordon: options.cordon || [],
|
||
|
|
tooltip: options.tooltip || [],
|
||
|
|
numSeparators: options.numSeparators || false,
|
||
|
|
rightNumSeparators: options.rightNumSeparators || false,
|
||
|
|
chartFont: options.chartFont || c.FONT_STYLE
|
||
|
|
};
|
||
|
|
this.options.items = items;
|
||
|
|
var types = [];
|
||
|
|
BI.each(items, function (idx, axisItems) {
|
||
|
|
var type = [];
|
||
|
|
BI.each(axisItems, function (id, item) {
|
||
|
|
type.push(BICst.WIDGET.SCATTER);
|
||
|
|
});
|
||
|
|
types.push(type);
|
||
|
|
});
|
||
|
|
this.combineChart.populate(items, types);
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function () {
|
||
|
|
this.combineChart.resize();
|
||
|
|
},
|
||
|
|
|
||
|
|
magnify: function () {
|
||
|
|
this.combineChart.magnify();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
BI.ScatterChart.EVENT_CHANGE = "EVENT_CHANGE";
|
||
|
|
BI.shortcut('bi.scatter_chart', BI.ScatterChart);
|