代码之家 › 专栏 › 技术社区 › Nabeel

显示一些点的Google散点图工具提示

scatter google-visualization charts javascript

Nabeel · 技术社区 · 6 年前

是否有任何方法可以显示散点图中某些点的工具提示,使其始终可见,如图所示 attached 我用过

 tooltip: { trigger: 'selection' }

但它仅在用户单击该点时才使其可见。我希望其中三个点始终显示工具提示,其他点被禁用(不可单击)。

1 回复 | 直到 6 年前

WhiteHat 6 年前

要在无需用户交互的情况下显示工具提示,
使用图表方法--> setSelection ,则,
在图表上 'ready' 事件
在 'select' “禁用”事件。。。

设置选择 获取对象数组,
每个对象都应具有的属性 row 和 column 从数据表。。。

chart.setSelection([
  {row: 0, column: 1},
  {row: 5, column: 1},
  {row: 11, column: 1}
]);

默认情况下,图表将在同一工具提示中显示多个选择,
使用以下选项为每个点显示单独的工具提示。。。

aggregationTarget: 'none'

以下选项用于多项选择。。。

selectionMode: 'multiple',

请参阅以下工作段。。。

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'v'],
    [10, 15],
    [15, 13],
    [18, 20],
    [24, 26],
    [34, 30],
    [40, 43],
    [49, 48],
    [50, 55],
    [65, 67],
    [70, 70],
    [72, 70],
    [73, 70],
    [80, 85]
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ScatterChart(container);
  var options = {
    aggregationTarget: 'none',
    height: 400,
    legend: {
      position: 'top'
    },
    selectionMode: 'multiple',
    tooltip: {
      trigger: 'selection'
    }
  };

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

  function setChartSelection() {
    chart.setSelection([
      {row: 0, column: 1},
      {row: 5, column: 1},
      {row: 11, column: 1}
    ]);
  }


  chart.draw(data, options);
}

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