英文:
ChartJS how to improve mobile tap areas
问题
一些用户提到很难点击图表点以查看其工具提示数据。是否有增加可点击点区域的方法？
英文:
Some of my users have mentioned that its hard to tap a chart point to see its tooltip data. Is there a way to increase the area of clickable points?
答案1
得分: 2
你可以将pointHitRadius设置为一个较大的数字：
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
pointHitRadius: 25
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
pointHitRadius: 25
}
]
},
options: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.umd.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
英文:
You can set the pointHitRadius to a higher number:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
pointHitRadius: 25
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
pointHitRadius: 25
}
]
},
options: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.umd.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论