UNPKG

@alicloud/cloud-charts

Version:

![](https://img.shields.io/npm/v/@alicloud/cloud-charts?color=%23ff8200)

178 lines (168 loc) 4.8 kB
'use strict'; import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose"; import { View } from '@antv/data-set/lib/view'; import '@antv/data-set/lib/api/statistics'; import '@antv/data-set/lib/transform/bin/histogram'; import Base from '../common/Base'; import errorWrap from '../common/errorWrap'; import themes from '../themes/index'; import { propertyAssign, propertyMap } from '../common/common'; import rectXAxis from '../common/rectXAxis'; import rectYAxis from '../common/rectYAxis'; import rectLegend from '../common/rectLegend'; import rectTooltip from '../common/rectTooltip'; import guide from '../common/guide'; import label from '../common/label'; import legendFilter from '../common/legendFilter'; import geomStyle from '../common/geomStyle'; import { activeRegionWithTheme } from '../common/interaction/index'; // 3.x代码 export var Histogram = /*#__PURE__*/function (_Base) { _inheritsLoose(Histogram, _Base); function Histogram() { var _this; for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } _this = _Base.call.apply(_Base, [this].concat(args)) || this; _this.chartName = 'G2Histogram'; return _this; } var _proto = Histogram.prototype; _proto.getDefaultConfig = function getDefaultConfig() { return { colors: themes.category_12, xAxis: { // type: "cat", labelFormatter: null, // 可以强制覆盖,手动设置label categories: null, autoRotate: false // 坐标轴粒度 // tickInterval: 1, }, yAxis: { labelFormatter: null, // 可以强制覆盖,手动设置label max: null, min: null }, legend: { align: "left", nameFormatter: null // 可以强制覆盖,手动设置label }, tooltip: { titleFormatter: null, nameFormatter: null, valueFormatter: null }, grid: false, label: false, // 分箱粒度 bin: { // bins: 10, // 分箱个数 binWidth: 1, // 分箱步长(会覆盖bins的配置) offset: 0 }, column: true, // 是否归一化 normalize: false }; }; _proto.init = function init(chart, config, data) { var defs = { x: propertyAssign(propertyMap.axis, { range: [0, 1] }, config.xAxis), y: propertyAssign(propertyMap.axis, { type: 'linear', nice: true // tickCount: 5, }, config.yAxis), type: { type: 'cat' } }; var dataView = computerData(config, data); chart.scale(defs); chart.data(dataView.rows); // 设置X轴 rectXAxis(this, chart, config); // 设置单个Y轴 rectYAxis(this, chart, config); // 设置图例 rectLegend(this, chart, config, null, 'multiple', "type"); legendFilter(this, chart); // tooltip rectTooltip(this, chart, config, { position: 'top', shared: true, showMarkers: false }, null, { position: 'top', shared: true, showMarkers: false }); // 绘制辅助线,辅助背景区域 guide(chart, config); // 设置坐标系:极坐标/直角坐标 var chartCoord = config.polar ? chart.coordinate("polar", { innerRadius: config.innerRadius || 0 }) : chart.coordinate(); // 横向柱状图 if (!config.column) { chartCoord.transpose(); } activeRegionWithTheme(chart); drawHist(chart, config); }; _proto.changeData = function changeData(chart, config, data) { var dataView = computerData(config, data); chart && chart.changeData(dataView.rows); }; return Histogram; }(Base); function drawHist(chart, config, field) { if (field === void 0) { field = "type"; } var colors = config.colors; var geom = chart.interval().position('x*y').color(field, colors).adjust('stack'); geomStyle(geom, config.geomStyle); label({ geom: geom, config: config }); } function computerData(config, data) { var _config$bin = config.bin, bins = _config$bin.bins, binWidth = _config$bin.binWidth, offset = _config$bin.offset; var dv = new View().source(data); dv.transform({ type: 'bin.histogram', field: 'x', bins: bins, binWidth: binWidth, offset: offset, groupBy: ['type', 'visible'], as: ['x', 'y'] }); if (config.normalize) { var total = dv.rows.reduce(function (acc, cur) { return acc + cur.y; }, 0); dv.transform({ type: 'map', callback: function callback(row) { row.y = row.y / total; return row; } }); } return dv; } var Whistogram = errorWrap(Histogram); export default Whistogram;