Chart.js - как отключить все на ходу

Question

Как я могу установить код, чтобы на диаграмме не отображались эффекты наведения, зависания, (наведение) и т. Д.?

Я использую chart.js. Ниже мой код, где я устанавливаю круговую диаграмму.

Html ..

<div id="canvas-holder" style="width:90%;"> 
    <canvas id="chart-area" /> 
</div> 

..и Js ...

$(document).ready(function() { 


       var config = { 
        type: 'pie', 
        data: { 
         datasets: [{ 
          data: [60,20], 
          backgroundColor: [ 
           "#ddd", 
           "#58AC1C" 
          ], 

          label: 'Dataset 1' 
         }], 
         labels: [ 
          "Bla1 ", 
          "Bla2 "+ 
         ] 
        }, 
        options: { 
         responsive: true 
        } 
       }; 


       window.onload = function() { 
        var ctx = document.getElementById("chart-area").getContext("2d"); 
        window.myPie = new Chart(ctx, config); 
       };  
      }); 

Answer 1

Вы можете попробовать

showTooltips: false 

Вы также можете по следующей ссылке

http://jsfiddle.net/TZq6q/298/

Answer 2

Если то, что вы хотите предотвратить эффект при наведении курсора мыши на любой серии, вы должны отключить tooltip и hover государство. Вы можете сделать это следующим образом:

$(function() { 
 

 
    Highcharts.chart('container', { 
 
     plotOptions: { 
 
     \t series: { 
 
      states: { 
 
         hover: { 
 
          enabled: false 
 
         } 
 
        } 
 
      } 
 
     }, 
 

 
     tooltip: { 
 
      enabled: false 
 
     }, 
 

 
     series: [{ 
 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
 
     }] 
 
    }); 
 
});

#reporting { 
 
    position: absolute; 
 
    top: 55px; 
 
    right: 20px; 
 
    font: 12px Arial, Verdana; 
 
    color: #666; 
 
    background: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 

 
<div id="container" style="height: 300px; min-width: 300px"></div> 
 
<div id="reporting"></div>

(шаблон взят из Highcharts документации).

Надеется, что это помогает :)

Answer 3

для того, чтобы удалить все парить стили/всплывающие подсказки с ванили chart.js:

var myChart = new Chart(canvas, { 
    options: { 
    tooltips: {enabled: false}, 
    hover: {mode: null}, 
    } 
    ... 
}) 

Chart.js просматривает все события mousemove на холсте, в которых он создавал ваш график. Установка режима наведения 'на нуль, похоже, отменяет все способы, с помощью которых холст ищет соответствующие элементы для назначения активированных классов :hover.

Событие всплывающей подсказки кажется отдельным, поэтому мне пришлось использовать обе линии, чтобы сделать диаграмму эффективной статикой.

Примечание. Первоначальные анимации по-прежнему работают на диаграмме с этими параметрами.

UPDATE: новейший Chart.js повторно в комплекте способ парения является «прослушал» для:

var myChart = new Chart(canvas, { 
    options: { 
    events: [] 
    } 
    ... 
}) 

делает опцию «событий» пустой список (вместо [ «нажмите», «зависать» , etc]) делает диаграмму «слепой»/статической, потому что она не будет слушать никаких событий.