为某些点显示 Google 散点图工具提示

Question

有什么方法可以显示工具提示，使散点图中的某些点始终可见，如图所示 attached 我用过

 tooltip: { trigger: 'selection' }

但它只有在用户点击该点时才会显示。我希望其中三个点始终显示工具提示，其他点被禁用（不可点击）。

Answer 1

无需用户交互即可显示工具提示，
使用图表方法 --> setSelection,
在图表的 'ready' 事件中，
在 'select' 事件中 "disable"...

setSelection 接受一个对象数组，
每个对象都应该有一个属性 for row 和 column 来自数据 table...

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>

为某些点显示 Google 散点图工具提示

Display Google Scatter chart tool tip for some points

javascript

charts

scatter

google-visualization