10

追加方法は次のとおりです。

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();
4

4 に答える 4

15

将来の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();
于 2014-02-25T14:36:47.350 に答える
12

更新しました

これが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() ;
                                        });
     });
于 2012-07-10T13:27:19.037 に答える
1

これは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);
于 2015-07-09T06:50:11.453 に答える
0

ポリマーを使用している人、または純粋な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))
于 2017-10-10T16:53:55.543 に答える