Highcharts - 一連のデータの 1 つであるツールチップを削除する方法

ジョンインヨン

!

線で矢印を描く

しかし、2 番目のポイントのツールチップを削除したいです。

正確には、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]
      ]
    }]
  });


});
FieryCat

次に、次に従ってシリーズを更新します。

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;
    }}}
  ]
}]

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

負のスタックを持つHighchartsバー:左右に異なるツールチップを表示する方法

分類Dev

aria属性をhighchartsツールチップに設定する方法

分類Dev

HighChartsでスタックされたシリーズの1つのdataLabelsを非表示にする方法はありますか

分類Dev

Highchartsのパイのjsonからのデータをツールチップに表示する

分類Dev

1つのツールチップ内に複数のツールチップをツールチップスターする

分類Dev

1つのページで2つのajax呼び出しを処理して、別のページのHighchartsにデータをプルします

分類Dev

Highchartsのツールチップで軸名を取得します

分類Dev

Pythonを使用して一連の株式データを1つの図にプロットする

分類Dev

Highchartsのツールチップの配列に配列を表示する

分類Dev

1つが0である一連の値を介して操作をループする方法

分類Dev

ChartJS-ツールチップに1行のデータを表示する

分類Dev

SET内で2つの列のデータを1つに連結する方法

分類Dev

Highchartsを使用してx軸カテゴリラベルの下にツールチップデータを表示する方法

分類Dev

一連のForループブロックを1つに短縮する方法

分類Dev

Linuxでデータの関連する行を1つの列にグループ化する

分類Dev

rで1つのデータを削除する方法

分類Dev

ansibleの1つのホストでマルチデータベースセットアップをモデル化する方法は?

分類Dev

1つのテーブルで複数のタイプの検証をチェックする方法

分類Dev

1つのコマンドでredisキーをバッチ削除する方法

分類Dev

HoverTool()ツールを使用するときにツールチップを1つだけ表示する

分類Dev

画像の下にあるHighchartsツールチップを参照してください

分類Dev

HighChartsツールトップを変更して詳細を表示する方法

分類Dev

Angular1を使用してボタンクリックでツールチップを表示する方法

分類Dev

ベクトル `A`の値と一致する値を持つデータフレーム` df1`の連続行を選択する方法

分類Dev

Chart.js 2.7.0グループ化された水平棒グラフ、グループ全体ではなく1つの棒のデータを表示するツールチップを取得するにはどうすればよいですか?

分類Dev

一連のHighChartsを動的にロードする

分類Dev

1つのデータテーブルへの複数のクエリで複数のテーブルデータをフェッチする方法

分類Dev

ローカルブランチの削除を1つのステップでリモートに伝播する方法-git、github

分類Dev

MYSQLに関連するいくつかのテーブルの少なくとも1つにあるデータを取得する方法

Related 関連記事

  1. 1

    負のスタックを持つHighchartsバー:左右に異なるツールチップを表示する方法

  2. 2

    aria属性をhighchartsツールチップに設定する方法

  3. 3

    HighChartsでスタックされたシリーズの1つのdataLabelsを非表示にする方法はありますか

  4. 4

    Highchartsのパイのjsonからのデータをツールチップに表示する

  5. 5

    1つのツールチップ内に複数のツールチップをツールチップスターする

  6. 6

    1つのページで2つのajax呼び出しを処理して、別のページのHighchartsにデータをプルします

  7. 7

    Highchartsのツールチップで軸名を取得します

  8. 8

    Pythonを使用して一連の株式データを1つの図にプロットする

  9. 9

    Highchartsのツールチップの配列に配列を表示する

  10. 10

    1つが0である一連の値を介して操作をループする方法

  11. 11

    ChartJS-ツールチップに1行のデータを表示する

  12. 12

    SET内で2つの列のデータを1つに連結する方法

  13. 13

    Highchartsを使用してx軸カテゴリラベルの下にツールチップデータを表示する方法

  14. 14

    一連のForループブロックを1つに短縮する方法

  15. 15

    Linuxでデータの関連する行を1つの列にグループ化する

  16. 16

    rで1つのデータを削除する方法

  17. 17

    ansibleの1つのホストでマルチデータベースセットアップをモデル化する方法は?

  18. 18

    1つのテーブルで複数のタイプの検証をチェックする方法

  19. 19

    1つのコマンドでredisキーをバッチ削除する方法

  20. 20

    HoverTool()ツールを使用するときにツールチップを1つだけ表示する

  21. 21

    画像の下にあるHighchartsツールチップを参照してください

  22. 22

    HighChartsツールトップを変更して詳細を表示する方法

  23. 23

    Angular1を使用してボタンクリックでツールチップを表示する方法

  24. 24

    ベクトル `A`の値と一致する値を持つデータフレーム` df1`の連続行を選択する方法

  25. 25

    Chart.js 2.7.0グループ化された水平棒グラフ、グループ全体ではなく1つの棒のデータを表示するツールチップを取得するにはどうすればよいですか?

  26. 26

    一連のHighChartsを動的にロードする

  27. 27

    1つのデータテーブルへの複数のクエリで複数のテーブルデータをフェッチする方法

  28. 28

    ローカルブランチの削除を1つのステップでリモートに伝播する方法-git、github

  29. 29

    MYSQLに関連するいくつかのテーブルの少なくとも1つにあるデータを取得する方法

ホットタグ

アーカイブ