iT邦幫忙

0

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

你好,
我最近因為專案遇到兩個問題。
一個問題是如何將<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邦研究生 5 級 ‧ 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 的知識

1 個回答

1
listennn08
iT邦高手 6 級 ‧ 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 來做,作法是差不多的

看更多先前的回應...收起先前的回應...

謝謝~長條圖可以使用連結了(不過還找不到cursor:point的設定要放在哪?)
x軸目前還不行(可能真的要像前兩位大大說的,從DOM下手?)。我再研究一下。

我修改了原本的範例, cursor 的設定跟 label click 都有加上去了

listennn08能請教cursor跟label click是加在哪裡嗎?謝謝

長條圖的 cursor 加在 css
label click 可以看一下 chartOptions.chart.events.load 那個 function

我要發表回答

立即登入回答