如何在HighCharts中删除和添加绘图线 [英] How to remove and add Plotlines in HighCharts

问题描述

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

I have 2 plotlines in highchart. When I select (for zoom & reset) some range before and after the plotline area some cases having plotlines even it's not in the selected range. So decided to remove the plotlines after validating the selected range and plotline dates . When I tried to set it back after the reset button click . It's not working.

正在移除:

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');
                                }
}

单击重置按钮后，我要再次设置绘图线.

When the reset Button is clicked I want to set the plotlines again .

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

                        {
                            id:'mSaleDate',
                            value: SaleStartedDate,
                            color: 'Green',
                            width: 4,
                            zIndex: 6})

所以事情是当我们进行缩放时，如果绘图线日期不在所选范围内，并且当用户单击重置缩放按钮时，我想删除绘图线.

So the thing is when we do a zoom I need to remove the plotlines if the plotline dates are not in the selected range and when user clicks on the reset zoom button I want to set the plotlines back.

谁能帮我修复它.

推荐答案

使用更新选项来重新创建绘图线

Use update option to recreate the plot line

在这里，我使用 lodash 的 merge 合并当前选项并添加绘图线:

Here i use the merge of lodash to merge current option and add your plotlines:

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

更新:当您致电 update 时，您绝对不需要获得所有选择.您只需要传递带有更改选项的对象

Update : you don't absolutely need to get all your opions when you call update. You just need to pass an object with the changed options

这篇关于如何在HighCharts中删除和添加绘图线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！