Chart.js 如何在折线图中显示标签和图例的光标指针

Question

我有以下使用 chart.js 的折线图示例。我想展示：

悬停时图例和标签的指针光标
在线悬停时显示所有标签数据

 var line_chart = new Chart(document.getElementById("line-chart"), {
        type: 'line',
        data: {
            labels: ['May', 'June', 'July'],
            datasets: [{
                    data: [15, 25, 15],
                    label: "My Dataset1",
                    borderColor: "#00F",
                    fill: false
                }, {
                    data: [35, 15, 25],
                    label: "My Dataset2",
                    borderColor: "#F00",
                    fill: false
                }
            ]
        },
        options: {

            tooltips: {
                mode: 'label',
            },
            hover: {
                mode: 'label'
            },
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div style='width:80%'>
<canvas id="line-chart" width="800" height="450"></canvas>
</div>

Answer 1

更好的方法

无需 jQuery 来选择画布元素 (

line-chart

)。

1 ▸ 解决方案：

在图表选项中添加以下内容：

   legend: {
      onHover: function(e) {
         e.target.style.cursor = 'pointer';
      }
   },
   hover: {
      onHover: function(e) {
         var point = this.getElementAtEvent(e);
         if (point.length) e.target.style.cursor = 'pointer';
         else e.target.style.cursor = 'default';
      }
   }

2 ▸ 解决方案：

将工具提示的

mode

设置为dataset
：

tooltips: {
   mode: 'dataset'
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var line_chart = new Chart(document.getElementById("line-chart"), {
   type: 'line',
   data: {
      labels: ['May', 'June', 'July'],
      datasets: [{
         data: [15, 25, 15],
         label: "My Dataset1",
         borderColor: "#00F",
         fill: false
      }, {
         data: [35, 15, 25],
         label: "My Dataset2",
         borderColor: "#F00",
         fill: false
      }]
   },
   options: {
      tooltips: {
         mode: 'dataset',
      },
      legend: {
         onHover: function(e) {
            e.target.style.cursor = 'pointer';
         }
      },
      hover: {
         onHover: function(e) {
            var point = this.getElementAtEvent(e);
            if (point.length) e.target.style.cursor = 'pointer';
            else e.target.style.cursor = 'default';
         }
      }
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div style='width:80%'>
   <canvas id="line-chart" width="800" height="450"></canvas>
</div>

Answer 2

使用 Chart.js 3.x 和 4.x：

onHover: (event, chartElement) => {
    event.native.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}

使用 Chart.js 2.x：

onHover: (event, chartElement) => {
    event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}

Answer 3

从 Chart js 版本 3.5.1 开始，onHover() 选项看起来略有不同，并且查找点的方法也发生了变化。
“target”在“e.native”下再嵌套一层

通过将交互模式设置为“索引”，我可以在悬停时在一个工具提示中看到我的组合图表值。

options: {
   interaction: { mode: 'index' },
   onHover: function (e) {
     const points = this.getElementsAtEventForMode(
       e,
       'index', { axis: 'x', intersect: true },
       false
     );

     if (points.length) e.native.target.style.cursor = 'pointer';
     else e.native.target.style.cursor = 'default';
   }
}

Answer 4

扩展@joshfindit的答案这里，对于任何正在寻找chart.js v3.5.1 Typescript解决方案的人：

onHover: (event, activeElements) => {
   (event?.native?.target as HTMLElement).style.cursor =
        activeElements?.length > 0 ? 'pointer' : 'auto';
}

Answer 5

ChartJs 2 提供

onHover

和

onLeave

处理程序。我们可以使用它们来更改光标：

  legend: {
    display: true,
    onHover: function (e) {
      e.target.style.cursor = 'pointer'
    },
    onLeave: function (e) {
      e.target.style.cursor = 'default'
    }
  }

Answer 6

感谢 @ɢʀᴜɴᴛ 和 @Fred Lintz，我终于在 Chart js 版本 3.5.1 上实现了这一点：

  onHover: (event, activeElements) => {
    if (activeElements?.length > 0) {
      event.native.target.style.cursor = 'pointer';
    } else {
      event.native.target.style.cursor = 'auto';
    }
  },

注意：还有另一种使用

document.getElementById('myChart').style.cursor = 'pointer';

的选项，效果很好，只是没有我想要的那么干净，因为它为整个图表设置了光标，但如果 Chart.js 再次更改 API，它将继续存在。

Answer 7

如果您正在为chartjs 使用react-chartjs-2 包装器。这可能对你有帮助🤓。

在react-chartjs-2中，我们可以使用以下选项属性配置使图例将光标作为👆指针。

const options = {
    plugins: {
        legends: {
            onHover: (event) => {
                event.native.target.style.cursor = 'pointer'
            }
        }
    }
}

Answer 8

花了我相当长的时间，但几乎没有其他答案适用于最新版本的 ChartJS（目前为 3.7.0）。在当前版本中，有一种简单的方法可以为所有图表配置此行为：

Chart.defaults.plugins.legend.onHover = function() { 
   document.body.style.cursor = 'pointer'; 
};

Chart.defaults.plugins.legend.onLeave = function() { 
   document.body.style.cursor = 'unset'; 
};

更多详细信息可以参见官方文档：https://www.chartjs.org/docs/latest/configuration/legend.html

Answer 9

您可以使用jquery抓取图表选择器来做到这一点，即

line-chart

。

hover: {
  onHover: function(e, el) {
      $("#line-chart").css("cursor", el[0] ? "pointer" : "default");
    }
  }

jsfiddle

Answer 10

正如其他人为其他框架指出的那样，在 Vue 中需要瞄准

native

属性。此外，

target

将是

canvas

，因此您需要：

onHover: function (e) {
  e.native.target.style.cursor = "pointer";
},
onLeave: function (e) {
  e.native.target.style.cursor = "default";
},

Answer 11

这个问题已有 5 年历史，在 2022 年使用 ChartJS 的 3.x.x 版本，此代码片段可能是一个不错的选择。

const isArray = a => a instanceof Array
const isNull = a => a == null
const cursor = a => {
  if (isNull(a)) return 'default'
  if (!isArray(a)) return 'pointer'
  if (isArray(a) && a.length > 0) return 'pointer'

  return 'default'
}

const $canvas = document.getElementById('chart')
const onHover = (e, item) => {
  $canvas.style.cursor = cursor(item)
}
const onLeave = () => {
  $canvas.style.cursor = 'default'
}

const lineChart = new Chart($canvas, {
  type: 'line',
  data: {
    labels: ['May', 'June', 'July'],
    datasets: [{
      data: [15, 25, 15],
      label: "My Dataset1",
      borderColor: "#00F",
      fill: false
    }, {
      data: [35, 15, 25],
      label: "My Dataset2",
      borderColor: "#F00",
      fill: false
    }]
  },
  options: {
    responsive: true,
    onHover,
    plugins: {
      legend: {
        onHover,
        onLeave,
      },
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="chart" width="600" height="180"></canvas>

Chart.js 如何在折线图中显示标签和图例的光标指针

问题描述投票：0回答：11

11个回答

更好的方法

最新问题

Chart.js 如何在折线图中显示标签和图例的光标指针

问题描述 投票：0回答：11

11个回答

更好的方法

最新问题

问题描述投票：0回答：11