如何僅顯示工具提示以在反應圖表中顯示 x 值

Question

我有一個折線圖，我只顯示四個值，但我的數據集更大，並且可以為所有數據集顯示在線點。 有沒有辦法只為顯示的 x 值顯示圓形指針？

Answer 1

您可以為此使用可編寫腳本的選項：

 var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3], backgroundColor: 'red', borderColor: 'red', radius: (ctx) => { let radius = 0; ctx.chart.scales.x.ticks.forEach((tick) => { if (tick.value === ctx.dataIndex) { radius = 5; } }) return radius; } }] }, options: {} } var 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.4.1/chart.js"></script> </body>

代碼筆： https ://codepen.io/leelenaleee/pen/JjNGVpY

如何僅顯示工具提示以在反應圖表中顯示 x 值

問題描述

1 個解決方案

解決方案1
0 2021-07-06 13:08:08

如何僅顯示工具提示以在反應圖表中顯示 x 值

問題描述

1 個解決方案

解決方案1 0 2021-07-06 13:08:08

解決方案1
0 2021-07-06 13:08:08