Vue3 如何將Highchart的x軸，換成router-link

highchart highcharts vue.js vue3 router-link

greenriver 2021-09-30 08:50:43 ‧ 1724 瀏覽

分享至

你好，
我最近因為專案遇到兩個問題。
一個問題是如何將<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的功能。

DanSnow iT邦好手 1 級 ‧ 2021-09-30 09:09:38 檢舉

看起來圖表的內容是不歸 Vue 管的，那你就沒辦法直接在裡面用 Vue 的 component ，我會建議你在確定圖表顯示後，直接用 DOM 的操作把 a 都找出來，幫它們綁上 click 的事件，自己在事件處理裡用 router.push 去解決

frank575 iT邦新手 4 級 ‧ 2021-09-30 10:17:23 檢舉

1. 建議使用 history 來處理路由轉換，如果要傳組件的話，我建議換個圖表庫比較好，因為這裡只能傳遞 html text，這樣的話處理上會不方便
2. 直接 this.value 就好，你可能對 setup this 與這個 this 的理解有誤，可以去補下 js this 的知識

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

listennn08

iT邦高手 5 級 ‧ 2021-09-30 09:50:23

最佳解答

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 來做，作法是差不多的