38

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

但问题是我不想在鼠标悬停时出现工具提示......

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

4

10 回答 10

82

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

    plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false
                }
            }
        }
    },
于 2015-05-14T19:27:20.207 回答
59

您需要将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
              ]
      }]
});
于 2013-04-26T08:08:50.813 回答
29

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

(复制并粘贴链接)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
    }
}
于 2016-01-27T23:36:06.370 回答
12

问题的标题是关于禁用悬停,所以如果其他人发现自己在这里是为了这个目的,我会详细说明@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 下。pie而不是 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对于 line 和 area 系列默认为 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: {...}}
    }
}
于 2019-05-16T15:16:19.113 回答
5

您可以简单地使用以下命令将它们关闭:

tooltip: {
    enabled: false       
},
于 2013-04-26T08:15:25.443 回答
4
plotOptions: {
  series: {
    states: {
      inactive: {
        opacity: 1,
      },
    },
  }
}

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

于 2020-04-30T11:34:07.237 回答
2

您可以通过设置选项简单地禁用它

tooltip:{
   enabled: false
}
于 2013-04-26T11:26:48.953 回答
2

为了完全关闭图表上的工具提示和悬停效果,需要关闭工具提示,禁用悬停状态并将非活动数据不透明度设置为 100%。

此答案基于先前的答案,并显示了该问题的完整解决方案。

这是关闭悬停和工具提示效果的配置:

  series: {
    states: {
      hover: {
        enabled: false
      },
      inactive: {
        opacity: 1,
      }
    }
  },
  tooltip: {
    enabled: false
  }
于 2021-01-15T09:21:59.320 回答
0

我通常只是禁用css中的样式,所以如果需要我仍然可以访问JS中的悬停事件......

.highcharts-tooltip {
    display: none;
}
于 2018-07-14T08:22:13.220 回答
0

如接受的答案中所述,您需要设置

 tooltip: { enabled: false }

注意- 您必须将其指定为您的Highcharts.Options对象的属性(即您的图表选项对象,而不是您的系列的属性)。因此,要么在传递给Highcharts.Chart对象的 JSON 中指定它,要么将其指定为显式Highcharts.Options创建的对象的属性,然后再将其传递给您Highcharts.Chart

请参阅https://api.highcharts.com/highcharts/tooltip.enabled

于 2018-10-29T23:37:49.837 回答