你好，
我最近因為專案遇到兩個問題。
一個問題是如何將<a>改成<router-link>?
另一個問題是<a>變數</a>的變數要如何帶入?
我的框架是Vue3.0、Vue-cli(之後會想改成vite，不過先這樣XD)
因為在使用Highcharts套件時，想要有個功能，
就是按下X軸的時候，或是按下長條圖後(這個好像沒辦法?)，能跳到該資料的頁面。
舉例:在Highchart中顯示的是十個廠區，然後我想要按下X軸後，能跳到該廠區的詳細資料頁面。
我爬文，目前只找到可以在xAxis的labels，加入formatter
setup(){
//getdata是我的廠區們
const getdata = [
// { y: 24.2, name: "Point1"},(之後會改成這樣)
['Shanghai', 24.2],
['Beijing', 20.8],
['Karachi', 14.9],
['Shenzhen', 13.7],
['Guangzhou', 13.1],
['Istanbul', 12.7],
['Mumbai', 12.4],
['Moscow', 12.2],
['São Paulo', 12.0],
['Delhi', 11.7],
['Kinshasa', 11.5],
['Tianjin', 11.2],
['Lahore', 11.1],
['Jakarta', 10.6],
['Dongguan', 10.6],
['Lagos', 10.6],
['Bengaluru', 10.3],
['Seoul', 9.8],
['Foshan', 9.3],
['Tokyo', 9.3]
]
//Highchart的設定
const chartOptions = {
chart: {
type: 'column'
},
xAxis:{
type: 'category',
labels:{
formatter: function() {
//這裡
return '<a>廠區名稱</a>'
},
useHTML:true
}
}
}
}
(1)有什麼辦法可以將<a></a>改成<router-link></router-link>?
我試過直接換成 return '<router-link to="/">廠區名稱</router-link>'，結果不行。
(2)廠區名稱的變數要怎麼帶入??我查到的是用this.value，不過因為我是寫在setup(){}裡面，所以沒有this的功能。
setup() {
const router = useRouter()
const getdata = [
// { y: 24.2, name: "Point1"},(之後會改成這樣)
['Shanghai', 24.2],
['Beijing', 20.8],
['Karachi', 14.9],
['Shenzhen', 13.7],
['Guangzhou', 13.1],
['Istanbul', 12.7],
['Mumbai', 12.4],
['Moscow', 12.2],
['São Paulo', 12.0],
['Delhi', 11.7],
['Kinshasa', 11.5],
['Tianjin', 11.2],
['Lahore', 11.1],
['Jakarta', 10.6],
['Dongguan', 10.6],
['Lagos', 10.6],
['Bengaluru', 10.3],
['Seoul', 9.8],
['Foshan', 9.3],
['Tokyo', 9.3]
]
const chartOptions = {
series: [{
data: getdata, // sample data
point: {
events: {
click: function () {
router.push(`/${this.name}`)
}
}
}
}],
chart: {
type: 'column'
},
xAxis:{
type: 'category',
}
}
onMounted(() => {
Highcharts.chart('container', chartOptions)
})
return { }
}
preview
也可以用 highcharts-vue 來做，作法是差不多的
我修改了原本的範例， cursor 的設定跟 label click 都有加上去了
listennn08能請教cursor跟label click是加在哪裡嗎?謝謝
長條圖的 cursor 加在 css
label click 可以看一下 chartOptions.chart.events.load 那個 function
2. 直接 this.value 就好，你可能對 setup this 與這個 this 的理解有誤，可以去補下 js this 的知識