fix&feature:

(1) feature: Add option boxplot.clip
(2) feature: Enable boxplot and candlestick containShape for "value"/"time"/"log" axis, enable proper shadow axisPointer. (candlestick-case.html, boxplot-multi.html)
(3) fix: Fix candlestick ends shapes can not be displayed on "value"/"time" axis. (candlestick-case.html)
(4) fix: candlestick shape width is inappropriate when datazoom filterMode is 'none'/'empty'. (candlestick-case.html)
(5) fix: In polar coordinate system, support "value"/"time" axis as angle/radius axis, enable propere bandWidth for bar series, enable proper shadow axisPointer. (bar-polar-multi-series-radial.html, bar-polar-multi-series.html)

Author: 100pah

src/chart/bar/BarView.ts

@@ -99,6 +99,7 @@ function getClipArea(coord: CoordSysOfBar, data: SeriesData) {
 // When boundaryGap is false in category axis, bar may exceed the grid.
 // We should not clip this part.
 // See test/bar2.html
+// PENDING: The effect is not preferable, but we preserve it for backward compatibility.
 if(baseAxis.type==='category'&&!baseAxis.onBand){
 constexpandWidth=data.getLayout('bandWidth');
 if(baseAxis.isHorizontal()){

src/chart/boxplot/BoxplotSeries.ts

@@ -65,6 +65,7 @@ export interface BoxplotSeriesOption
 coordinateSystem?: 'cartesian2d'
 
 layout?: LayoutOrient
+clip?: boolean;
 /**
  * [min, max] can be percent of band width.
  */
@@ -73,9 +74,11 @@ export interface BoxplotSeriesOption
 data?: (BoxplotDataValue|BoxplotDataItemOption)[]
 }
 
+exportconstSERIES_TYPE_BOXPLOT='boxplot';
+
 classBoxplotSeriesModelextendsSeriesModel<BoxplotSeriesOption>{
 
-staticreadonlytype='series.boxplot';
+staticreadonlytype='series.'+SERIES_TYPE_BOXPLOT;
 readonlytype=BoxplotSeriesModel.type;
 
 staticreadonlydependencies=['xAxis','yAxis','grid'];
@@ -109,6 +112,7 @@ class BoxplotSeriesModel extends SeriesModel<BoxplotSeriesOption> {
 legendHoverLink: true,
 
 layout: null,
+clip: true,
 boxWidth: [7,50],
 
 itemStyle: {

src/chart/boxplot/BoxplotView.ts

@@ -17,20 +17,27 @@
 * under the License.
 */
 
-import*aszrUtilfrom'zrender/src/core/util';
 importChartViewfrom'../../view/Chart';
 import*asgraphicfrom'../../util/graphic';
 import{setStatesStylesFromModel,toggleHoverEmphasis}from'../../util/states';
 importPath,{PathProps}from'zrender/src/graphic/Path';
-importBoxplotSeriesModel,{BoxplotDataItemOption}from'./BoxplotSeries';
+importBoxplotSeriesModel,{SERIES_TYPE_BOXPLOT,BoxplotDataItemOption}from'./BoxplotSeries';
 importGlobalModelfrom'../../model/Global';
 importExtensionAPIfrom'../../core/ExtensionAPI';
 importSeriesDatafrom'../../data/SeriesData';
 import{BoxplotItemLayout}from'./boxplotLayout';
 import{saveOldStyle}from'../../animation/basicTransition';
+import{resolveNormalBoxClipping}from'../helper/whiskerBoxCommon';
+import{
+createClipPath,SHAPE_CLIP_KIND_FULLY_CLIPPED,SHAPE_CLIP_KIND_NOT_CLIPPED,
+SHAPE_CLIP_KIND_PARTIALLY_CLIPPED,
+updateClipPath
+}from'../helper/createClipPathFromCoordSys';
+import{map}from'zrender/src/core/util';
+
 
 classBoxplotViewextendsChartView{
-statictype='boxplot';
+statictype=SERIES_TYPE_BOXPLOT;
 type=BoxplotView.type;
 
 private_data: SeriesData;
@@ -47,12 +54,29 @@ class BoxplotView extends ChartView {
 }
 
 constconstDim=seriesModel.getWhiskerBoxesLayout()==='horizontal' ? 1 : 0;
+constneedClip=seriesModel.get('clip',true);
+constcoordSys=seriesModel.coordinateSystem;
+constclipArea=coordSys.getArea&&coordSys.getArea();
+constclipPath=needClip&&createClipPath(coordSys,false,seriesModel);
 
 data.diff(oldData)
 .add(function(newIdx){
 if(data.hasValue(newIdx)){
 constitemLayout=data.getItemLayout(newIdx)asBoxplotItemLayout;
+
+constclipKind=needClip
+ ? resolveNormalBoxClipping(clipArea,itemLayout) : SHAPE_CLIP_KIND_NOT_CLIPPED;
+if(clipKind===SHAPE_CLIP_KIND_FULLY_CLIPPED){
+return;
+}
+
 constsymbolEl=createNormalBox(itemLayout,data,newIdx,constDim,true);
+// One axis tick can corresponds to a group of box items (from different series),
+// so it may be visually misleading when a group of items are partially outside
+// but no clipping is applied.
+// Consider performance of zr Element['clipPath'], only set to partially clipped elements.
+updateClipPath(clipKind===SHAPE_CLIP_KIND_PARTIALLY_CLIPPED,symbolEl,clipPath);
+
 data.setItemGraphicEl(newIdx,symbolEl);
 group.add(symbolEl);
 }
@@ -67,6 +91,14 @@ class BoxplotView extends ChartView {
 }
 
 constitemLayout=data.getItemLayout(newIdx)asBoxplotItemLayout;
+
+constclipKind=needClip
+ ? resolveNormalBoxClipping(clipArea,itemLayout) : SHAPE_CLIP_KIND_NOT_CLIPPED;
+if(clipKind===SHAPE_CLIP_KIND_FULLY_CLIPPED){
+group.remove(symbolEl);
+return;
+}
+
 if(!symbolEl){
 symbolEl=createNormalBox(itemLayout,data,newIdx,constDim);
 }
@@ -75,6 +107,9 @@ class BoxplotView extends ChartView {
 updateNormalBoxData(itemLayout,symbolEl,data,newIdx);
 }
 
+// See `updateClipPath` in `add`.
+updateClipPath(clipKind===SHAPE_CLIP_KIND_PARTIALLY_CLIPPED,symbolEl,clipPath);
+
 group.add(symbolEl);
 
 data.setItemGraphicEl(newIdx,symbolEl);
@@ -192,7 +227,7 @@ function updateNormalBoxData(
 }
 
 functiontransInit(points: number[][],dim: number,itemLayout: BoxplotItemLayout){
-returnzrUtil.map(points,function(point){
+returnmap(points,function(point){
 point=point.slice();
 point[dim]=itemLayout.initBaseline;
 returnpoint;

src/chart/boxplot/boxplotLayout.ts

@@ -17,103 +17,69 @@
 * under the License.
 */
 
-import*aszrUtilfrom'zrender/src/core/util';
+import{isArray}from'zrender/src/core/util';
 import{parsePercent}from'../../util/number';
 importtypeGlobalModelfrom'../../model/Global';
-importBoxplotSeriesModelfrom'./BoxplotSeries';
-importAxis2Dfrom'../../coord/cartesian/Axis2D';
-
-consteach=zrUtil.each;
-
-interfaceGroupItem{
-seriesModels: BoxplotSeriesModel[]
-axis: Axis2D
-boxOffsetList: number[]
-boxWidthList: number[]
-}
+importBoxplotSeriesModel,{SERIES_TYPE_BOXPLOT}from'./BoxplotSeries';
+import{
+eachCollectedAxis,eachCollectedSeries,getCollectedSeriesLength,
+requireAxisStatistics
+}from'../../coord/axisStatistics';
+import{makeCallOnlyOnce}from'../../util/model';
+import{EChartsExtensionInstallRegisters}from'../../extension';
+importAxisfrom'../../coord/Axis';
+import{registerAxisContainShapeHandler}from'../../coord/scaleRawExtentInfo';
+import{calcBandWidth}from'../../coord/axisBand';
+import{
+makeAxisStatKey,
+createSimpleAxisStatClient,createBandWidthBasedAxisContainShapeHandler
+}from'../helper/axisSnippets';
+
+
+constcallOnlyOnce=makeCallOnlyOnce();
 
 exportinterfaceBoxplotItemLayout{
 ends: number[][]
 initBaseline: number
 }
 
-exportdefaultfunctionboxplotLayout(ecModel: GlobalModel){
-
-constgroupResult=groupSeriesByAxis(ecModel);
-
-each(groupResult,function(groupItem){
-constseriesModels=groupItem.seriesModels;
-
-if(!seriesModels.length){
+exportfunctionboxplotLayout(ecModel: GlobalModel){
+constaxisStatKey=makeAxisStatKey(SERIES_TYPE_BOXPLOT);
+eachCollectedAxis(ecModel,axisStatKey,function(axis){
+constseriesCount=getCollectedSeriesLength(axis,axisStatKey);
+if(!seriesCount){
 return;
 }
-
-calculateBase(groupItem);
-
-each(seriesModels,function(seriesModel,idx){
+constbaseResult=calculateBase(axis,seriesCount);
+eachCollectedSeries(axis,axisStatKey,function(seriesModel: BoxplotSeriesModel,idx){
 layoutSingleSeries(
 seriesModel,
-groupItem.boxOffsetList[idx],
-groupItem.boxWidthList[idx]
+baseResult.boxOffsetList[idx],
+baseResult.boxWidthList[idx]
 );
 });
 });
 }
 
-/**
- * Group series by axis.
- */
-functiongroupSeriesByAxis(ecModel: GlobalModel){
-constresult: GroupItem[]=[];
-constaxisList: Axis2D[]=[];
-
-ecModel.eachSeriesByType('boxplot',function(seriesModel: BoxplotSeriesModel){
-constbaseAxis=seriesModel.getBaseAxis();
-letidx=zrUtil.indexOf(axisList,baseAxis);
-
-if(idx<0){
-idx=axisList.length;
-axisList[idx]=baseAxis;
-result[idx]={
-axis: baseAxis,
-seriesModels: []
-}asGroupItem;
-}
-
-result[idx].seriesModels.push(seriesModel);
-});
-
-returnresult;
-}
-
 /**
  * Calculate offset and box width for each series.
  */
-functioncalculateBase(groupItem: GroupItem){
-constbaseAxis=groupItem.axis;
-constseriesModels=groupItem.seriesModels;
-constseriesCount=seriesModels.length;
-
-constboxWidthList: number[]=groupItem.boxWidthList=[];
-constboxOffsetList: number[]=groupItem.boxOffsetList=[];
+functioncalculateBase(baseAxis: Axis,seriesCount: number): {
+boxOffsetList: number[];
+boxWidthList: number[];
+}{
+constboxWidthList: number[]=[];
+constboxOffsetList: number[]=[];
 constboundList: number[][]=[];
 
-letbandWidth: number;
-if(baseAxis.type==='category'){
-bandWidth=baseAxis.getBandWidth();
-}
-else{
-letmaxDataCount=0;
-each(seriesModels,function(seriesModel){
-maxDataCount=Math.max(maxDataCount,seriesModel.getData().count());
-});
-constextent=baseAxis.getExtent();
-bandWidth=Math.abs(extent[1]-extent[0])/maxDataCount;
-}
+constbandWidth=calcBandWidth(
+baseAxis,
+{fromStat: {key: makeAxisStatKey(SERIES_TYPE_BOXPLOT)},min: 1},
+).w;
 
-each(seriesModels,function(seriesModel){
+eachCollectedSeries(baseAxis,makeAxisStatKey(SERIES_TYPE_BOXPLOT),function(seriesModel: BoxplotSeriesModel){
 letboxWidthBound=seriesModel.get('boxWidth');
-if(!zrUtil.isArray(boxWidthBound)){
+if(!isArray(boxWidthBound)){
 boxWidthBound=[boxWidthBound,boxWidthBound];
 }
 boundList.push([
@@ -127,14 +93,19 @@ function calculateBase(groupItem: GroupItem) {
 constboxWidth=(availableWidth-boxGap*(seriesCount-1))/seriesCount;
 letbase=boxWidth/2-availableWidth/2;
 
-each(seriesModels,function(seriesModel,idx){
+eachCollectedSeries(baseAxis,makeAxisStatKey(SERIES_TYPE_BOXPLOT),function(seriesModel,idx){
 boxOffsetList.push(base);
 base+=boxGap+boxWidth;
 
 boxWidthList.push(
 Math.min(Math.max(boxWidth,boundList[idx][0]),boundList[idx][1])
 );
 });
+
+return{
+ boxOffsetList,
+ boxWidthList,
+};
 }
 
 /**
@@ -212,3 +183,18 @@ function layoutSingleSeries(seriesModel: BoxplotSeriesModel, offset: number, box
 ends.push(from,to);
 }
 }
+
+exportfunctionregisterBoxplotAxisHandlers(registers: EChartsExtensionInstallRegisters){
+callOnlyOnce(registers,function(){
+constaxisStatKey=makeAxisStatKey(SERIES_TYPE_BOXPLOT);
+requireAxisStatistics(
+registers,
+axisStatKey,
+createSimpleAxisStatClient(SERIES_TYPE_BOXPLOT)
+);
+registerAxisContainShapeHandler(
+axisStatKey,
+createBandWidthBasedAxisContainShapeHandler(axisStatKey)
+);
+});
+}

src/chart/boxplot/install.ts

@@ -20,12 +20,14 @@
 import{EChartsExtensionInstallRegisters}from'../../extension';
 importBoxplotSeriesModelfrom'./BoxplotSeries';
 importBoxplotViewfrom'./BoxplotView';
-importboxplotLayoutfrom'./boxplotLayout';
+import{boxplotLayout,registerBoxplotAxisHandlers}from'./boxplotLayout';
 import{boxplotTransform}from'./boxplotTransform';
 
 exportfunctioninstall(registers: EChartsExtensionInstallRegisters){
 registers.registerSeriesModel(BoxplotSeriesModel);
 registers.registerChartView(BoxplotView);
 registers.registerLayout(boxplotLayout);
 registers.registerTransform(boxplotTransform);
+
+registerBoxplotAxisHandlers(registers);
 }

src/chart/candlestick/CandlestickSeries.ts

@@ -82,9 +82,11 @@ export interface CandlestickSeriesOption
 data?: (CandlestickDataValue|CandlestickDataItemOption)[]
 }
 
+exportconstSERIES_TYPE_CANDLESTICK='candlestick';
+
 classCandlestickSeriesModelextendsSeriesModel<CandlestickSeriesOption>{
 
-staticreadonlytype='series.candlestick';
+staticreadonlytype='series.'+SERIES_TYPE_CANDLESTICK;
 readonlytype=CandlestickSeriesModel.type;
 
 staticreadonlydependencies=['xAxis','yAxis','grid'];