2023/10/13

Vue Chart.js 折線圖預設不顯示圓點符號 滑進去圓點後顯示符號

<script>
import Chart from 'chart.js';

export default {
	mounted() {
		this.renderChart();
	},
	methods: {
		renderChart() {
			const ctx = this.$refs.myChart.getContext('2d')
			const myChart = new Chart(ctx, {
				type: 'bar',
				data: {
					labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
					datasets: [{
						label: '# of Votes',
						data: [12, 19, 3, 5, 2, 3],
						backgroundColor: 'rgba(54, 162, 235, 0.2)',
						borderColor: 'rgba(54, 162, 235, 1)',
						borderWidth: 1
					}]
				},
				options: {
					elements: {
						point: {
							radius: 0
						}
					},
					tooltips: {
						mode: 'index',
						intersect: false
					},
					hover: {
						mode: 'nearest',
						intersect: false
					},
					elements: {
						point: {
							//預設圓的半徑
							radius: 0,
							// 滑入時圓的半徑
							hoverRadius: 5,
						}
					},
				}
			})
		}
	}
}; 
</script>