Question

当您没有悬停在特定的点上时，是否可以激活悬停＆＃39;在折线图中？

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

修改：类似http://watchstocks.herokuapp.com/

的内容

Answer 1

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

有关详细信息，请查看mode工具提示配置选项和hover配置选项以满足您的需求。这是一个例子。

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 example，展示了与您的示例匹配的行为。

Answer 2

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

^^当您将鼠标悬停在任意y轴位置时，将显示工具提示。如果您只想将它悬停在一条线上的某个点上时显示，请使用：

tooltips: {
  mode: 'label'
},

Answer 3

对于图表版本 > 3 将对象 tooltips 重命名为 tooltip 并将其放置在 plugin 对象内。

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


}

Chart.js上的悬停模式

3 个答案: