Chart.js上的悬停模式

Question

当您没有悬停在折线图中的特定"点"上时,是否可以激活悬停？

每当我将鼠标悬停在图表的任何部分上时,我都希望激活该特定工具提示.

编辑:像这样的http://watchstocks.herokuapp.com/

Answer 1

对于图表版本 > 3，将对象工具提示重命名为tooltip并将其放置在插件对象内。

options: {
      plugins: {
                 legend: {
                 display: false
                 },
                 tooltip: {
                 mode: 'index',
                 intersect: false
                 }
      },
      hover: {
             mode: 'nearest',
             intersect: false
             }


}

Answer 2

是的,您可以使用chart.js配置工具提示,以便为您引用的图表获得类似的行为.

有关更多信息,请查看modetooltip配置选项并根据需要悬停配置选项.这是一个例子.

options: {
  responsive: true,
  title:{
    display:true,
    text:'Chart.js Line Chart'
  },
  tooltips: {
    mode: 'index',
    intersect: false,
  },
 hover: {
    mode: 'nearest',
    intersect: true
  },
  scales: {
    xAxes: [{
      display: true,
      scaleLabel: {
        display: true,
        labelString: 'Month'
      }
    }],
    yAxes: [{
      display: true,
      scaleLabel: {
        display: true,
      },
    }]
  }
}

这是一个codepen示例,演示与您的示例匹配的行为.

Answer 3

tooltips: {
  mode: 'x-axis'
},

^^ 当您将鼠标悬停在任何 y 轴位置上时，将显示工具提示。如果您只想在将鼠标悬停在线上的点上时显示它，请使用以下命令：

tooltips: {
  mode: 'label'
},