如何在 HighCharts 中删除和添加绘图线

问题描述

我在 highchart 中有 2 条情节线。当我在情节线区域之前和之后选择（用于缩放和重置）某个范围时，某些情况下即使情节线不在选定范围内，也有情节线。因此决定在验证所选范围和情节线日期后删除情节线。当我在重置按钮单击后尝试将其设置回时。它不起作用。

删除：

selection(event) {
if((fDate < mCurrentDate && tDate < mCurrentDate)||(fDate > mCurrentDate && tDate > mCurrentDate)){
                                    this.xAxis[0].removePlotLine('mCurrentDate');
                                }
                                if((pDate < mCurrentDate && pDate < mCurrentDate)||(pDate > mCurrentDate && pDate > mCurrentDate)){
                                    this.xAxis[0].removePlotLine('mSaleDate');
                                }
}

点击重置按钮后，我想再次设置情节线。

render() { 
                            id:'mCurrentDate',value: currentDate.getTime(),color: 'pink',width: 4,zIndex: 3},{
                            id:'mSaleDate',value: SaleStartedDate,color: 'Green',zIndex: 6})

所以问题是当我们进行缩放时，如果情节线日期不在所选范围内，并且当用户单击重置缩放按钮时我想将情节线设置回来，我需要删除情节线。

谁能帮我修一下。

解决方法

使用更新选项重新创建情节线

这里我使用 merge 的 lodash 来合并当前选项并添加您的情节线：

merge(options,{
    xAxis: {
        plotLines: [
            { 
                id:'mCurrentDate',value: currentDate.getTime(),color: 'pink',width: 4,zIndex: 3
            },{
                id:'mSaleDate',value: SaleStartedDate,color: 'Green',zIndex: 6
            }
        ]
    }
});
this.chart.update(options,true);

更新：当您致电 update 时，您并非绝对需要获得所有选项。您只需要传递一个带有更改选项的对象

angular2-highcharts highcharts highcharts