<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>