禁用在HighCharts上悬停

Question

我使用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
               ]
       }]
    });

但问题是我不想在鼠标上显示工具提示...

是否可以在悬停时禁用工具提示？

Answer 1

禁用工具提示只会禁用工具提示,但悬停效果仍然存在.要禁用悬停效果,请将以下内容添加到plotOptions:

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

Answer 2

您需要将tooltip属性设置为false,如下所示:

tooltip: { enabled: false },

jsFiddle在这里

以下是您案例的完整代码:

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

Answer 3

您也可以选择禁用所有鼠标跟踪,包括工具提示和悬停效果:

(复制并粘贴链接)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
    }
}

Answer 4

问题的标题与禁用悬停有关，因此，如果有人为此目的而在这里发现自己，我将详细说明@SergeyB的答案。

有一些选项会影响鼠标悬停更改系列样式的方式。根据系列类型，它们各自具有不同的效果。我将在这里讨论线和饼图系列，但通常来说，您可以在下面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会影响应用于悬停的系列的样式。例如，对于线系列，默认设置是加粗线宽并将光晕应用于最近的点。

要禁用当前悬停的线系列的任何样式，请将其设置plotOptions.series.states.hover.enabled为false。

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

jsFiddle

不幸的是，如果我们在一个饼图系列上设置它，这会使悬停的切片与其余的非活动切片一起淡入背景（请参见此jsFiddle示例）。如果要删除所有悬停样式而不影响非活动样式，可以将其设置plotOptions.series.states.hover.halo.size为0（删除光晕）和plotOptions.pie.states.hover.brightness0（删除增亮效果）。请注意，由于亮度特定于饼图系列，因此记录在plotOptions下。馅饼而不是plotOptions。系列（尽管即使我在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 指出的那样，您可以通过设置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: {...}}
    }
}

Answer 5

您只需使用以下内容即可将其转为:

tooltip: {
    enabled: false       
},

Answer 6

plotOptions: {
  series: {
    states: {
      inactive: {
        opacity: 1,
      },
    },
  }
}

我这样做是为了在悬停时显示多个折线图。