Apexcharts 光标指针

Question

我用 apexcharts.js 在 js 上制作图表栏。所以我想将光标更改为指针。请帮忙！ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

我的代码！

var options = {
  series: [{
  name: 'series1',
  data: [60, 85, 75, 120, 100, 109, 97]
}],
  toolbar: {
  show: false,
},
  chart: {
  height: 350,
  type: 'area',
  fontFamily: 'Proxima Nova',

  toolbar: {
    show: false
  },
},
dataLabels: {
  enabled: false
},
stroke: {
  curve: 'smooth'
},
xaxis: {
  categories: ["Янв", "Фев", "Март", "Апр", "Май", "Июнь", "Июль", "Авг", "Сен", "Окт", "Ноя", "Дек"]
},
tooltip: {
  x: {
    format: 'dd/MM/yy HH:mm'
  },
},
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

Answer 1

我也遇到过同样的问题。我将向您介绍两种解决方案：

第一种方法：发现于 Github

您可以将光标设置为指向：

chart: {
  ...
  events: {
    dataPointMouseEnter: function(event) {
      event.path[0].style.cursor = "pointer";
    }
  }
}

在此 github link 中查看更多详细信息：https://github.com/apexcharts/apexcharts.js/issues/1466

第二种方法：我自己的方法

您可以通过检查器定位 apexchart 组件的 class 名称，然后在代码级别将以下属性添加到此 class :

cursor: pointer

示例：

// Change cursor on hover
.apexcharts-pie {
  cursor: pointer;
}

Apexcharts 光标指针

Apexcharts cursor pointer

javascript

html

css

apexcharts