Я использую Chart JS, чтобы отображать div во всплывающих подсказках - PullRequest
Новая
       113

Я использую Chart JS, чтобы отображать div во всплывающих подсказках

1 голос
/ 29 мая 2020

Я использую Chart JS, чтобы отображать div во всплывающих подсказках при наведении, но при удалении Наведите всплывающие подсказки, которые он делает, t go в их предыдущее состояние. Возможно ли это в таблице JS. Я пробовал этот код изменить onHover, но как вернуться в нормальное положение.

Есть ли какое-либо событие, которое я пропустил в документации, или какое-либо событие, которое поможет с этим. 

var data = {
  labels: ['heading1', 'heading2', 'heading3','heading4'],
  datasets: [{
    backgroundColor: "rgba(255,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 2,
    hoverBackgroundColor: "rgba(255,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
    data: [20, 49, 60, 81],
  }]
};
var option = {
  legend: false,
  title: {
display: true,
},
  onHover: function(evt) {
var item = myLineChart.getElementAtEvent(evt);
if (item.length) {
      //console.log("onHover",item, evt.type);
    //console.log(">data", item[0]._index, data.datasets[0].data[item[0]._index]);
    jQuery(".div1").css({"backgroundColor":"yellow","color":"red"});
}
},
scales: {
  yAxes: [{
      ticks: {
          display: false
      },
      scaleLabel: {
        display: true,
        labelString: 'Y axis'
      },
  }],
  xAxes: [{
      ticks: {
          display: false,
      },
      scaleLabel: {
        display: true,
        labelString: 'X axis'
      },
  }]
 },
tooltips: {
  callbacks: {
      label: function(tooltipItem) {
          if(tooltipItem.yLabel == 65){
            return '';
          }else if(tooltipItem.yLabel == 59){
            return '';
          }else if(tooltipItem.yLabel == 20){
            return '';
          }else if(tooltipItem.yLabel == 81){
            return '';
          }
      }
  }
 },
};

var myLineChart = Chart.Line('myChart', {
data: data,
options: option,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
...