Question

无论如何都要禁用谷歌可视化图表中的用户选择（特别是组织结构图）

在javascript中，我以编程方式在其中一个节点上设置选择。无论如何，从那时起禁用用户选择，以便即使用户点击图表上的其他部分，选择也不会改变？

Answer 1

你无法禁用，但可以覆盖

收听'select'个活动，并setSelection收听所需的row

参见以下示例......

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addColumn('string', 'ToolTip');

    // For each orgchart box, provide the name, manager, and tooltip to show.
    data.addRows([
      [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
       '', 'The President'],
      [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
       'Mike', 'VP'],
      ['Alice', 'Mike', ''],
      ['Bob', 'Jim', 'Bob Sponge'],
      ['Carol', 'Bob', '']
    ]);

    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));

    // set selection on 'ready' and 'select'
    google.visualization.events.addListener(chart, 'ready', setSelection);
    google.visualization.events.addListener(chart, 'select', setSelection);

    function setSelection() {
      chart.setSelection([{row: 1}]);
    }

    chart.draw(data, {allowHtml: true});
  },
  packages:['orgchart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 2

您可以通过在图表上设置 enableInteractivity 选项来停用用户选择。来自documentation：

图表是否抛出基于用户的事件或对用户做出反应相互作用。如果为false，图表将不会选择＆＃39;或其他基于交互的事件（但会抛出准备或错误事件），以及将不会显示hovertext或以其他方式更改取决于用户输入

请注意，这也会删除指示＆amp;当用户将鼠标悬停在可能需要或可能不需要的图表元素时显示的工具提示。

Answer 3

正如@ziotino 提到的，留空 .selection() 将欺骗谷歌图表以完成禁用点上的点击/选择事件。

// Listen to "select" event when we click on any of the "points" on the chart
    google.visualization.events.addListener(chart, 'select', function () {
        chart.setSelection();
    });

Google Visualization禁用用户选择

3 个答案: