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

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

  •  1
  • Nabeel  · 技术社区  · 6 年前

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

     tooltip: { trigger: 'selection' }

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

    1 回复  |  直到 6 年前
        1
  •  0
  •   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>