如何禁用chartjs legendclick

我想禁用chart.js蜘蛛圖表圖例點擊，因爲當我點擊圖例時，數據系列隱藏了相關的一組值，如下圖所示。如何禁用chartjs legendclick

我的要求是，我不希望禁用的數據集。我已經嘗試了preventDefault（）;在圖表上單擊，但它不起作用。

我的代碼示例附在下面。請檢查..

<!doctype html> 
<html> 

<head> 
    <title>Radar Chart</title> 
    <script src="../dist/Chart.bundle.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head> 

<body> 
    <div style="width:75%"> 
     <canvas id="canvas"></canvas> 
    </div> 
    <script> 
    var randomScalingFactor = function() { 
     return Math.round(Math.random() * 100); 
    }; 
    var randomColorFactor = function() { 
     return Math.round(Math.random() * 255); 
    }; 
    var randomColor = function(opacity) { 
     return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')'; 
    }; 

    var config = { 
     type: 'radar', 
     data: { 
      labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], 
      datasets: [{ 
       label: "My First dataset", 
       backgroundColor: "rgba(0,0,0,0.5)", 
       pointBackgroundColor: "rgba(220,220,220,1)", 
       data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] 
      }, { 
       label: "My Second dataset", 
       backgroundColor: "rgba(0,120,0,0.5)", 
       pointBackgroundColor: "rgba(151,187,205,1)", 
       hoverPointBackgroundColor: "#fff", 
       pointHighlightStroke: "rgba(151,187,205,1)", 
       data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] 
      },] 
     }, 
     options: { 
      legend: { 
       position: 'top', 
       onClick: (e) => e.stopPropagation() 
      }, 
      title: { 
       display: true, 
       text: '' 
      }, 
      scale: { 
       reverse: false, 
       gridLines: { 
       color: ['black'] 
       }, 
       ticks: { 
       beginAtZero: true 
       } 
      } 
     } 
    }; 

    window.onload = function() { 
     window.myRadar = new Chart(document.getElementById("canvas"), config); 
    }; 





    </script> 
</body> 

</html>

來源

2016-07-26 Preethy

嘗試設置處理程序：onClick：（e）=> e.stopPropagation（）at canvas – kollein

有同樣的問題。只需刪除點擊，觸摸選項中的處理程序。 – Nitin

@Nitin你可以擴展嗎？沒有'onClick'處理程序將意味着它將返回到默認行爲？這是如何在我自己的項目中實現的，但是您提到的是不同的選項嗎？ – ste2425

按照文檔存在於傳說中暴露事件對象onClick處理程序。如果你stopPropagation停止數據系列隱藏：

 let chart = new Chart(elem.find('canvas')[0], { 
       type: 'line', 
       data: { 
        labels: [], 
        datasets: [] 
       }, 
       options: { 
        responsive: true, 
        maintainAspectRatio: false, 
        legend: { 
         onClick: (e) => e.stopPropagation() 
        } 
       } 
      });

以上是ES6，如果你不使用以下支持的瀏覽器是老ES5 equivilant。

legend: { 
    onClick: function (e) { 
     e.stopPropagation(); 
    } 
}

Chartjs必須legend.onClick這就是爲什麼停止執行後註冊自己的單擊事件。

docs

來源

2016-07-26 08:03:09 ste2425

無法正常工作。甚至沒有加載圖表... – Preethy

然後你可以發佈你的代碼，如何實現圖表。上面的代碼確實有效，我在最新的Chart.Js項目中使用它。只是說'不工作'並不能提供什麼不工作的信息。你可能錯過了一個逗號，或者你可能在一個不同的界面等版本。一方面請注意，代碼是ES6你的瀏覽器支持的權利？ – ste2425

看着你的發佈代碼，我不能看到任何明顯的問題。我正在使用並非所有瀏覽器（IE）都支持的ES6箭頭函數語法。你可以嘗試舊的ES5語法'onClick：function（e）{e.stopPropagation（）; }'。萬一我更新了我的答案。 – ste2425

要覆蓋點擊一個圖例項的默認行爲，即顯示/隱藏相關聯的數據集的圖表中，可以使用下面的選項（內側options爲了清楚起見）：

options: { 
    legend: { 
     onClick: function(event, legendItem) {} 
    } 
}

這是重寫默認行爲的方式，即通過提供具有相同參數的函數。根據您的要求，此功能應該有一個空的身體（因此，立即返回），因爲點擊圖例項目時絕對不會發生任何事情。在docs中尋找legend.onClick。雖然它目前僅出現在兩種圖表類型下，但該選項適用於所有圖表類型。

來源

2016-07-26 13:42:57 xnakos

哦，所以處理程序的存在會覆蓋默認行爲？不是preventDefault本身？ – ste2425

@ ste2425明確定義一個選項會覆蓋它的默認值（在我們的例子中，默認值是隱藏或顯示數據集的函數（將在點擊時調用）（如果數據集分別顯示或隱藏在在點擊時呼叫/））。這是Chart.js的一般方式。通過提供替代選項來更改回調（例如，用於提示）。在大多數情況下，我認爲你不需要混淆事件傳播。 – xnakos

如何禁用chartjs legendclick

回答

相關問題