2017-06-20 13 views
1

ハイチャート - シリーズのデータ​​の1つ、ツールチップを削除するには

は私がライン

を使用して矢印を描くが、私は第二の点の削除ツールチップにしたいです。

が正確であることを、私は1つの矢印ライン

どのような方法がありますで唯一のツールチップを表示したいです?

コード:

$(function() { 

    (function(H) { 

    var arrowCheck = false, 
     pathTag; 

    H.wrap(H.Series.prototype, 'drawGraph', function(proceed) { 

     // Now apply the original function with the original arguments, 
     // which are sliced off this function's arguments 
     proceed.apply(this, Array.prototype.slice.call(arguments, 1)); 

     var arrowLength = 15, 
     arrowWidth = 9, 
     series = this, 
     data = series.data, 
     len = data.length, 
     segments = data, 
     lastSeg = segments[segments.length - 1], 
     path = [], 
     lastPoint = null, 
     nextLastPoint = null; 

     if (lastSeg.y == 0) { 
     lastPoint = segments[segments.length - 2]; 
     nextLastPoint = segments[segments.length - 1]; 
     } else { 
     lastPoint = segments[segments.length - 1]; 
     nextLastPoint = segments[segments.length - 2]; 
     } 

     var angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX)/
     (lastPoint.plotY - nextLastPoint.plotY)); 

     if (angle < 0) angle = Math.PI + angle; 

     path.push('M', lastPoint.plotX, lastPoint.plotY); 

     if (lastPoint.plotX > nextLastPoint.plotX) { 

     if (arrowCheck === true) { 

      pathTag = document.getElementById("arrow"); 
      if (pathTag != null) { 
      pathTag.remove(pathTag); 
      } 
     } 

     path.push(
      'L', 
      lastPoint.plotX + arrowWidth * Math.cos(angle), 
      lastPoint.plotY - arrowWidth * Math.sin(angle) 
     ); 
     path.push(
      lastPoint.plotX + arrowLength * Math.sin(angle), 
      lastPoint.plotY + arrowLength * Math.cos(angle) 
     ); 
     path.push(
      lastPoint.plotX - arrowWidth * Math.cos(angle), 
      lastPoint.plotY + arrowWidth * Math.sin(angle), 
      'Z' 
     ); 
     } else { 


     if (arrowCheck === true) { 

      pathTag = document.getElementById("arrow"); 
      if (pathTag != null) { 
      pathTag.remove(pathTag); 
      } 
     } 

     path.push(
      'L', 
      lastPoint.plotX - arrowWidth * Math.cos(angle), 
      lastPoint.plotY + arrowWidth * Math.sin(angle) 
     ); 
     path.push(
      lastPoint.plotX - arrowLength * Math.sin(angle), 
      lastPoint.plotY - arrowLength * Math.cos(angle) 
     ); 
     path.push(
      lastPoint.plotX + arrowWidth * Math.cos(angle), 
      lastPoint.plotY - arrowWidth * Math.sin(angle), 
      'Z' 
     ); 
     } 

     series.chart.renderer.path(path) 
     .attr({ 
      fill: series.color, 
      id: 'arrow' 
     }) 
     .add(series.group); 

     arrowCheck = true; 

    }); 
    }(Highcharts)); 



    var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     defaultSeriesType: 'scatter' 
    }, 
    xAxis:{ 
     min: 0, 
     max: 5 
    }, 
    plotOptions: { 

     series: { 
     animation: { 
      duration: 2000 
     }, 
     lineWidth: 2, 
     marker: { 
      enabled: false 
     } 
     }, 

     states: { 
     hover: { 
      enabled: true, 
      lineWidth: 2 
     }, 

     } 

    }, 

    series: [{ 
     name: 'main', 
     id: 'main', 
     data: [ 
     [0, 0], 
     [3,4] 
     ] 
    }] 
    }); 


}); 
+0

コード:http://jsfiddle.net/vyfsf1ft/3/ –

+0

追加のプロパティを持つツールチップに表示したくないポイントを定義します。 showTooltipをfalseに設定します。ツールヒントフォーマッタで、そのプロパティをチェックすることができます。それに応じて - ツールヒントを表示するかどうか - 例を参照してください。http://jsfiddle.net/vyfsf1ft/14/ – morganfree

+0

@morganfree問題を解決できました。 –

答えて

0

が続いに従ってあなたのシリーズを更新:

series: [{ 
    name: 'main', 
    id: 'main', 
    data: [ 
    {x: 0, y: 0], 
    {x: 3, y: 4, tooltip: false} 
    ] 
}] 

および更新フォーマッタの設定:

tooltip: { 
    formatter: function() { 
     if (this.tooltip) { 
      return false; 
     } 
     // ... other stuff 
    } 
} 

または、代わりに前の溶液を、それが使用することができますポインタイベント:

series: [{ 
    name: 'main', 
    id: 'main', 
    data: [ 
    {x: 0, y: 0], 
    {x: 3, y: 4, events: {mouseOver: function() { 
     return false; 
    }}} 
    ] 
}] 
+0

ありがとう!!私はこの問題を解決することができました。 私はとても幸せです!良い一日を! :) –

関連する問題