jquery - Highcharts 移除渲染器路径

Question

这是它的添加方式：

chart.renderer.path(['M', 1200, 10, 'V', 1500, 0])
            .attr({
                'stroke-width': 2,
                stroke: 'red'
            })
            .add();

但是如何删除呢？

var x = someValue;
chart.renderer.path(['M', x, 10, 'V', 1500, 0])
        .attr({
            'stroke-width': 2,
            stroke: 'red'
        })
        .add();

Answer 1

对于未来的 Google 员工，这将起作用：

var path = chart.renderer.path(['M', 1200, 10, 'V', 1500, 0])
.attr({
    'stroke-width': 2,
    stroke: 'red'
})
.add();

// remove the path
path.element.remove();

Answer 2

更新

这是你如何删除它jsFiddle

  function(chart) { // on complete

    chart.renderer.path(['M', 0, 0, 'L', 100, 100, 200, 50, 300, 100])
        .attr({
            'stroke-width': 2,
            stroke: 'red'
        })
        .add();
    $(":button").click(function(){
        $('path[d="M 0 0 L 100 100 200 50 300 100"]').remove() ;
         });
    });

按 id 删除路径

jsFiddle

    function(chart) { // on complete

    chart.renderer.path(['M', 0, 0, 'L', 100, 100, 200, 50, 300, 100])
        .attr({
            'stroke-width': 2,
            stroke: 'red' ,
            id :'myPath'
        })
        .add();
    $(":button").click(function(){
        $("#myPath").remove() ;
                                        });
     });

Answer 3

我发现它element.remove()在 Chrome 中运行良好，但WebView在 Android 上运行时就不行，因此可能无法在其他浏览器环境中运行。

深入研究对象的属性和方法，我发现了一个safeRemoveChild()方法，它似乎在WebView. 这就是：

var path = chart.renderer.path(['M', 1200, 10, 'V', 1500, 0])
.attr({
    'stroke-width': 2,
    stroke: 'red'
})
.add();

// remove the path
path.safeRemoveChild(path.element);

Answer 4

对于使用聚合物或只想使用纯 js 执行此操作的任何人，以下是如何管理将在加载时创建并在每次图表更新时重绘的对象：

http://jsfiddle.net/57xw879k/1/

这样做的好处是它被添加到图表对象中，因此您不依赖 DOM 或任何特定的访问它的方法。

如果您想在不同时间执行操作， http://api.highcharts.com/highcharts/chart.events也值得一读。

HTML：

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

<button id="remove">
  Remove label
</button>
<button id="add">
  Add label
</button>

JS：

const chart = Highcharts.chart('container', {

  chart: {
    events: {
      render: function() {
        handleLabel(this)
        var label = this.renderer.label('The chart was just redrawn', 100, 120)
        .attr({
          fill: Highcharts.getOptions().colors[0],
          padding: 10,
          r: 5,
          zIndex: 8
        })
        .css({
          color: '#FFFFFF'
        })
        .add()
        setTimeout(function () {
          label.fadeOut()
        }, 1000)
      }
    }
  },
  title: {text: 'Highcharts label actions'},
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },    
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]    
})

function handleLabel(chart) {
    if (chart.myLabel) {
    chart.myLabel.destroy()
    addLabel(chart)
  } else {
    addLabel(chart)
  }
}

function addLabel(chart) {
  var point = chart.series[0].points[8];
  chart.myLabel = chart.renderer.label('Max observation', 270, 50, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
    .css({
        color: '#FFFFFF'
    })
    .attr({
      fill: 'rgba(0, 0, 0, 0.75)',
      padding: 8,
      r: 5,
      zIndex: 6
    })
    .add()
}

function removeLabel(chart) {
  !objectIsEmpty(chart.myLabel) && chart.myLabel && chart.myLabel.destroy()
}

function objectIsEmpty(obj) {
  return Object.keys(obj).length === 0 && obj.constructor === Object
}

document.getElementById('remove').addEventListener('click', () => removeLabel(chart))
document.getElementById('add').addEventListener('click', () => addLabel(chart))