Question

我正在使用谷歌饼图，我想在饼图片上禁用点击事件。这是我的代码：

google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['State Group', 'Names'],
      ['Andhra Pradesh', 9],
      ['Madhya Pradesh', 4.5],
      ['Tamilnadu / Pondicherry', 7],
      ['Karnataka', 2.5],
      ['Others', 1]
    ]);

    var options = {
      // title: 'My Daily Activities',
      pieSliceText: 'none',
      pieHole: 0.80,
          slices: {  0: {color: '#46B1C9'},
                1: {color: '#84C0C6'},
                2: {color: '#F37992'},
                3: {color: '#6A6478'},
                          4: {color: '#C9CCCA'},
      },
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));

    chart.draw(data, options);
  }

我已经使用此代码禁用单击事件，但不知何故它无效！

google.visualization.events.addListener(chart, 'ready', function(){
            $("#donutchart").unbind("click");
    });

Answer 1

 google.visualization.events.addListener(chart, 'ready', function(){
            $("#donutchart").unbind("click").click(onClick);

试试这个......

Answer 2

几年前我就知道这一点，但是我一直在努力解决这个问题，并提出了一种解决方案。

我的问题是我正在使用HTML功能自定义工具提示，但是当我单击图形的一部分时，工具提示的css将被清除干净。

我能够使用Google图表为您提供的方法（getSelection（），请参阅文档here）将选择事件隔离开来，这实际上令人困惑，因为他们将其直接放置在全局窗口中。 >

一旦我发现我实际上将事件传递给自定义处理程序，并做了一些陪审团操纵，以不禁用单击/选择事件（因为这似乎不太可能），而是保留了我的自定义CSS （可以在我的用例之外以多种方式使用此逻辑）

您可以在下面看到我的代码，其中我使用返回的事件行并将其与一些硬编码数据（名称，颜色）进行匹配，以更改这些工具提示CSS。然后，一旦我能够捕获并记录选择信息，就将其传递给处理程序以执行相同的操作。我还不得不使用对象作为状态形式，因为由于某些原因，当您两次单击图表切片时，google图表会返回一个空数组，而不是带有事件对象的数组。

希望这对以后的所有人有帮助！

google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
 var rows = [
  ['Savings Category', 'Savings'],
  ['Trade Savings', 11, ],
  ['Shipping Savings', 20],
  ['Bulk Savings', 12],
  ['Promo Savings', 12],
 ];

 var data = google.visualization.arrayToDataTable(rows);

 var colors = {
  "Trade Savings": '#0066a7',
  "Shipping Savings": '#54c0e9',
  "Bulk Savings": '#cccccc',
  "Promo Savings": '#818181',
 }

 var options = {
  click:'event',
  pieHole: 0.8,
  legend: 'none',
  height: '90%',
  width: '90%',
  pieSliceText: 'none',
  backgroundColor: '#f8f5f3',
  colors: ['#0066a7', '#54c0e9', '#cccccc', '#818181'],
  chartArea: {
   height: '70%',
   width: '70%',
  },
  slices: [{offset: 0.05}, {offset: 0.05}, {offset: 0.05}, {offset: 0.05}],
  tooltip: {
   isHtml: true,
   text: "value",
   textStyle: { fontSize: 11},
   trigger: 'focus',
  },
 };

 var chart = new google.visualization.PieChart(document.getElementById('doughnut-chart'));
 chart.draw(data, options);

 google.visualization.events.addListener(chart, 'onmouseover', toolTipHandler)

 google.visualization.events.addListener(chart, 'select', selectHandler);

 function selectHandler() {
  toolTipHandler(chart.getSelection()[0])
 }

 var chartState = {
  selectedSlice: null
 }

 function toolTipHandler(e) {

  var currSlice;

  if (!e) {
   currSlice = chartState.selectedSlice
   chartState.selectedSlice = null
  }else{
   currSlice = rows[e.row + 1]
   chartState.selectedSlice = rows[e.row + 1]
  }

  if (currSlice[0] === "Bulk Savings"){

   $(".google-visualization-tooltip").css("border-bottom", "2px solid " + colors[currSlice[0]])
   $(".google-visualization-tooltip").css({
    "position": "relative",
    "top": "-100px",
    "left": "0",
    "z-index": "1",
    "width": "160px",
    "color": "yellow"
  })
  }
  else if (currSlice[0] === "Trade Savings"){
   $(".google-visualization-tooltip").css("border-bottom", "2px solid " + colors[currSlice[0]])
   $(".google-visualization-tooltip").css({
    "position": "relative",
    "top": "-206px",
    "bottom": "0",
    "left": "260px",
    "width": "30%",
    "z-index": "1",
    "text-align": "center",
   })
  }
  else if (currSlice[0] === "Shipping Savings"){
   $(".google-visualization-tooltip").css("border-bottom", "2px solid " + colors[currSlice[0]])
   $(".google-visualization-tooltip").css({
    "position": "relative",
    "top": "-113px",
    "left": "42px",
    "z-index": "1",
    "padding": "0 40px 0 0",
    "margin": "0 0 0 20px",
    "text-align": "center",
   })
  }
  else{
   $(".google-visualization-tooltip").css("border-top", "2px solid " + colors[currSlice[0]])
   $(".google-visualization-tooltip").css({
    "position": "relative",
    "top": "-125px",
    "left": "-10px",
    "z-index": "1",
    "padding": "0 40px 0 0",
    "margin": "0 0 0 20px",
    "text-align": "center",
   })
  }
 }
}

Answer 3

自己遇到了这个问题。您可以使用 enableInteractivity: false 禁用选项中的交互性，但这会关闭悬停时的工具提示，您可能不希望这样做。

相反，这是有效的：

...all your other chart code

var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(dataTable, options);

google.visualization.events.addListener(chart, 'click', function(e) {
  e.preventDefault();
})

在谷歌饼图上禁用点击事件

3 个答案: