时间戳

首页 > 解决方案 > 在 Google 折线图中将单点设置为活动/显示点和工具提示

javascript - 在 Google 折线图中将单点设置为活动/显示点和工具提示

问题描述

我目前使用谷歌折线图来显示两条相互拦截的线。我想显示数据点，如果可能的话，还想显示工具提示，线条在哪里截取。

我目前的解决方案是显示所有点并增加特定点的大小，但实际上我想保留在指向它们时查看点的功能。

if (!intercept && oldVal > newVal) {
      intercept = true
      point = 'point { size: 10; }'
    }
data.push([i + 1, oldVal, newVal, point])

标签： javascriptchartsgoogle-visualization

解决方案

看起来你在点大小的正确轨道上。

我们必须将pointSize配置选项设置为大于零的值，
以便能够在样式列中设置大小。
但我们可以使用类似 --> 的东西pointSize: 0.1
来防止其他点不可见。

至于工具提示，我们可以将tooltip.trigger选项设置为...
'selection'或'both' 

tooltip: {
  trigger: 'both'
}

然后我们可以使用图表的'ready'事件，
来设置图表的选择 

google.visualization.events.addListener(chart, 'ready', function () {
  chart.setSelection([{row: intercept, column: 2}]);
});

使用上面的trigger选项，当我们设置图表的选择时，
工具提示会自动出现。

请参阅以下工作片段... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Old');
  data.addColumn('number', 'New');
  data.addColumn({type: 'string', role: 'style'});

  var intercept = null;
  var rows = new Array(10);
  $.each(rows, function (i) {
    var oldVal = i;
    var newVal = rows.length - i;
    var point = null;
    if ((intercept === null) && (oldVal === newVal)) {
      intercept = i;
      point = 'point { size: 10; }';
    }
    data.addRow([i + 1, oldVal, newVal, point])
  });

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  google.visualization.events.addListener(chart, 'ready', function () {
    chart.setSelection([{row: intercept, column: 2}]);
  });

  chart.draw(data, {
    pointSize: 0.1,
    tooltip: {
      trigger: 'both'
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

推荐阅读