Question

I have a chart.js line chart displaying properly. When you hover over the y-axis gridlines, the tooltips display as they should.

I'm trying to convert this to function on a touchscreen, so there is no hover. Is there a way to add a simple parameter to make the tooltip show on both hover and onclick?

Note, I know I could add a custom tooltip and add all of that functionality - I'm trying to see if there's just a parameter I can add as I don't need a custom tooltip.

Answer 1

对于Chart.js v2，您可以specify those events at the root level of chart options。

options: {
    events: ['click']
}

Answer 2

在指定图表的选项时，只需将"click"添加到tooltipEvents列表

    ...
    tooltipEvents: ["mousemove", "touchstart", "touchmove", "click"],
});

在下面的小提琴中，除了click之外，我已从列表中删除了所有其他事件，以便了解它在移动设备上的效果

小提琴 - http://jsfiddle.net/8uobybv3/

Answer 3

对于 ChartJS版本2.8.0 ，您将需要同时添加click和mouseout事件，以使工具提示以所需的方式运行。

当鼠标指针移到图表画布区域之外时，click事件将使工具提示在单击点时显示，而mouseout事件将隐藏工具提示，这是所需的行为。

注意：如果不添加mouseout事件，即使在图表画布区域之外移动或单击鼠标，工具提示也不会隐藏。

代码：

options: {
  events: ["click", "mouseout"],
....
...

ChartJS: Show default tooltip onclick

3 个答案: