Question

我目前正在使用Google折线图来显示两条相互交叉的线。我想显示数据点，如果可能的话，还显示工具提示，这些行在哪里截取。

我当前的解决方案是显示所有点并增加特定点的大小，但实际上我想保留指向这些点时看到这些点的功能。

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

Answer 1

看来您在正确的位置上了。

我们必须将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>

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

1 个答案: