我正在使用圖表js。我想單擊餅圖切片并設定警報以顯示單擊的切片的名稱。
responsive: false,
onClick : (event, items) =>{
alert("Clicked");
}
這將在任何切片上產生術語“點擊”。但是我如何才能得到切片。當我改變了長期“clicked”的items結果[object Object]。如何隔離切片的名稱。您知道將滑鼠懸停在 chartsjs 餅圖切片上時出現的名稱。
當我檢查圖表部分時，我點擊（以第一個餅圖部分為例）我看到：
[i]
0: i
hidden: false
_chart: ni {id: 2, ctx: CanvasRenderingContext2D, canvas: canvas#myChart4, config: {…}, width: 650, …}
_datasetIndex: 0
_index: 0
_model:
backgroundColor: "rgb(0, 72, 165)"
borderAlign: "center"
borderColor: "#fff"
borderWidth: 2
circumference: 1.3057964574823102
endAngle: -0.26499986931258634
innerRadius: 78.4
label: false
outerRadius: 156.8
startAngle: -1.5707963267948966
x: 325
y: 192.2
[[Prototype]]: Object
uj5u.com熱心網友回復：
正如你所說，你得到一個物件，如果你記錄這個物件，你會看到它是一個包含所有活動元素的陣列。如果您記錄元素本身，您會看到它包含 datasetIndex 和 dataIndex，通過這些，您可以從圖表中獲取當前標簽，如下所示：
const options = {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
}]
},
options: {
onClick: (evt, activeEls, chart) => {
console.log(chart.data.labels[activeEls[0].index])
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>編輯
看起來您使用的是 V2，程序基本相同，但圖表變數定義在不同的地方：
const options = {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
}]
},
options: {
onClick: (evt, activeEls) => {
console.log(activeEls[0]._chart.data.labels[activeEls[0]._index])
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/355201.html
標籤：javascript 图表.js
下一篇：如何處理冬夏令時