web-dev-qa-db-ja.com

HighChartsでホバーを無効にする

HighChartsライブラリを使用して円グラフを作成していますが、これが私のグラフです。

 // http://jsfiddle.net/t2MxW/20890/

    var chart = new Highcharts.Chart({
        colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        credits: { enabled: false },
        chart: {
               renderTo: 'container',
               backgroundColor: 'rgba(255, 255, 255, 0.1)',
               type: 'pie',
               margin: [0, 0, 0, 0],
               spacingTop: 0,
               spacingBottom: 0,
               spacingLeft: 0,
               spacingRight: 0
        },
        title: { text: null },
        plotOptions: {
               pie: {
                   allowPointSelect: false,
                   size: '100%',
                    dataLabels: { enabled: false }
               }
       },
       series: [{
               showInLegend: false,
               type: 'pie',
               name: 'Pie Chart',
               data: [
                     ['Mobile', 65], // first half of pie
                     ['Other', 35] // second half of pie
               ]
       }]
    });

しかし、問題は、マウスオーバーでツールチップを表示したくないことです...

ホバー時にツールチップを無効にすることは可能ですか？

javascriptjqueryhighcharts
27
Vytalyi

次のように、tooltip属性をfalseに設定する必要があります。

tooltip: { enabled: false },

jsFiddle here

ケースの完全なコードは次のとおりです。

var chart = new Highcharts.Chart({
       colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
       credits: { enabled: false },
       tooltip: { enabled: false },
       chart: {
              renderTo: 'container',
              backgroundColor: 'rgba(255, 255, 255, 0.1)',
              type: 'pie',
              margin: [0, 0, 0, 0],
              spacingTop: 0,
              spacingBottom: 0,
              spacingLeft: 0,
              spacingRight: 0
       },
       title: { text: null },
       plotOptions: {
              pie: {
                  allowPointSelect: false,
                  size: '100%',
                   dataLabels: { enabled: false }
              }
      },
      series: [{
              showInLegend: false,
              type: 'pie',
              name: 'Pie Chart',
              data: [
                    ['Mobile', 65], // first half of pie
                    ['Other', 35] // second half of pie
              ]
      }]
});
51
lifetimes

ツールチップを無効にすると、ツールチップが無効になりますが、ホバー効果は引き続き存在します。ホバー効果を無効にするには、plotOptionsに次を追加します。

    plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false
                }
            }
        }
    },
63
SergeyB

または、ツールチップとホバー効果の両方で、一般的にすべてのマウストラッキングを無効にすることもできます。

（リンクのコピーと貼り付け） http://api.highcharts.com/highcharts#series 。enableMouseTracking

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-enablemousetracking-false/

plotOptions: {
    series: {
        enableMouseTracking: false
    }
}
15
ninedozen

質問のタイトルはホバリングを無効にすることです。そのため、他の誰かがその目的のためにここにいる場合、@ SergeyBの answer について詳しく説明します。

マウスのホバリングがシリーズのスタイルを変更する方法に影響するいくつかのオプションがあります。それらはそれぞれ、シリーズのタイプに応じて異なる効果があります。ここで線シリーズとパイシリーズについて説明しますが、通常、現在ホバーされているシリーズに適用されるスタイリングについてはplotOptions.<seriesType>.states.hover、ホバーされていないシリーズに適用されるスタイリングについてはplotOptions.<seriesType>.states.inactive（plotOptionsなど） pie.states.hover）。これらのオプションはいずれもツールチップのスタイルに影響しません。

plotOptions.series.states.inactive

plotOptions.series.states.inactive は、現在ホバーされていないすべてのシリーズに適用されるスタイルに影響します。背景にフェードするのを防ぐには、plotOptions.series.states.inactive.opacityを1に設定します。

var chartOptions = {
    // ...
    plotOptions: {
        series: {
            states: {
                inactive: {
                    opacity: 1,
                },
            },
        },
    },
}

行のjsFiddle

パイのjsFiddle

plotOptions.series.states.hover

plotOptions.series.states.hover は、ホバーされているシリーズに適用されるスタイルに影響します。たとえば、ラインシリーズの場合、デフォルトではライン幅を太くし、最も近い点にハローを適用します。

現在ホバーされているlineシリーズのスタイル設定を無効にするには、plotOptions.series.states.hover.enabledをfalseに設定します。

var chartOptions = {
    // ...
    chart: {
        type: "line",
    },
    plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false,
                },
            },
        },
    },
}

jsFiddle

残念ながら、これをpieシリーズに設定すると、ホバースライスが非アクティブスライスの残りの部分とともに背景にフェードインします（これを参照- jsFiddle 例）。非アクティブなスタイリングに影響を与えずにすべてのホバースタイリングを削除する場合、plotOptions.series.states.hover.halo.sizeを0（ハローを削除）に設定し、plotOptions.pie.states.hover.brightnessを0（ブライトニング効果を削除）に設定できます。明るさは円シリーズに固有であるため、plotOptions。seriesではなくplotOptions。pieで文書化されていることに注意してください（ただし、 plotOptions.seriesの下に追加した場合でも）。

var chartOptions = {
    // ...
    chart: {
        type: "pie",
    },
    plotOptions: {
        series: {
            states: {
                hover: {
                    halo: {
                        size: 0,
                    },
                    // this worked for me even though it's not
                    // documented under plotOptions.series:
                    //brightness: 0,
                },
            },
        },
        pie: {
            states: {
                hover: {
                    brightness: 0,
                },
            },
        },
    },
}

jsFiddle

plotOptions.series.stickyTracking

折れ線または面シリーズを使用している場合、チャートにカーソルを合わせるとすぐに、シリーズに触れていない場合でも、最も近いシリーズはホバースタイリングを受け取り、残りは非アクティブなスタイリングを受け取ります。これは、 plotOptions.series.stickyTracking がラインシリーズとエリアシリーズに対してデフォルトでtrueであるためです。 plotOptions.series.stickyTrackingをfalseに設定すると、ホバーおよび非アクティブなスタイリングは、ライン上にホバーしているときにのみ適用されます。

var chartOptions = {
    // ...
    chart: {
        type: "line",
    },
    plotOptions: {
        series: {
            stickyTracking: false,
        },
    },
}

jsFiddle

plotOptions.series.enableMouseTracking

@ninedozen noted のように、plotOptions.series.enableMouseTrackingをfalseに設定することにより、マウスの動きに基づいてすべてのレスポンシブな対話を完全に無効にすることができます。これは、ホバー/非アクティブなスタイリングに加えてツールチップも無効にすることに注意してください。

オプションの範囲

これらのオプションをチャート全体のすべてのシリーズに適用するには、plotOptions.seriesの下に配置します。それらを特定のシリーズタイプのみに適用するには（またはオプションが特定のシリーズに固有の場合）、plotOptions.<seriesType>の下に配置します。それらを特定のシリーズに適用するには、そのシリーズのオプション内に配置します。

var chartOptions = {
    series: [
        {
            name: "series1",
            type: "line",
            data: [...],
            // these options will only apply to series1, not series2 or series3
            states: {...},
        },
        {
            name: "series2",
            type: "line"
            data: [...],
        },
        {
            name: "series3",
            type: "pie"
            data: [...],
        }
    ],
    plotOptions: {
        // these options will apply to all series in the chart
        series: {states: {...}},
        // these options will only apply to series of type line
        // i.e. series1 and series2
        line: {states: {...}}
    }
}
5
Galen Long

以下を使用するだけでそれらを有効にできます。

tooltip: {
    enabled: false       
},
5
SteveP

オプションを設定するだけで無効にできます

tooltip:{
   enabled: false
}
2
Strikers

受け入れられた回答で指定されているように、設定する必要があります

 tooltip: { enabled: false }

注-Highcharts.Optionsオブジェクトのプロパティとして指定する必要があります（つまり、チャートオプションオブジェクト、not シリーズのプロパティ）。したがって、Highcharts.Chartオブジェクトに渡すJSONで指定するか、明示的に作成するHighcharts.Optionsオブジェクトのプロパティとして指定します 、それをあなたに渡す前にHighcharts.Chart

https://api.highcharts.com/highcharts/tooltip.enabled を参照してください

0
Chris Halcrow

通常、CSSのスタイルを無効にするだけで、必要に応じてJSのホバーイベントにアクセスできます...

.highcharts-tooltip {
    display: none;
}
0
Ben Hall