如何仅显示工具提示以在反应图表中显示 x 值

Question

I have a line chart where I am displaying only four values but my datasets are larger and as you can the dot on line is shown for all datasets.我有一个折线图，我只显示四个值，但我的数据集更大，并且可以为所有数据集显示在线点。 Is there a way to show only the circle pointer only for x values that are displayed?有没有办法只为显示的 x 值显示圆形指针？

Answer 1

You can make use of the scriptable options for this:您可以为此使用可编写脚本的选项：

 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>

Codepen: https://codepen.io/leelenaleee/pen/JjNGVpY代码笔： 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