iT邦幫忙

2023 iThome 鐵人賽

DAY 17
0
SideProject30

Nuxt3的初心者之旅:淬鍊出屬於自己的金融投資儀表板系列 第 17

DAY17 - 誰是賠錢貨- Nuxt3建立HighChart股票績效比較圖(1)

  • 分享至 

  • xImage
  •  

今日工事

完成多支股票績效比較

績效圖

// [id].vue
  <div class="w-[70%] mx-auto mt-3">
    <ClientOnly>
      <highcharts
        v-if="stockChartFix.length !== 0"
        class="w-[1000px] mx-auto my-10"
        :constructor-type="'stockChart'"
        :options="chartOptionsMulti"
      />
    </ClientOnly>
  </div>
 
<script setup>
import axios from 'axios'

const route = useRoute()
const id = route.params.id

// key
const fmp = import.meta.env.VITE_KEY_FMP

// API
const stockChartApi = `https://financialmodelingprep.com/api/v3/historical-price-full/${id}?timeseries=365&apikey=${fmp}`
const stockChart2Api = `https://financialmodelingprep.com/api/v3/historical-price-full/meta?timeseries=365&apikey=${fmp}`
const stockChart3Api = `https://financialmodelingprep.com/api/v3/historical-price-full/googl?timeseries=365&apikey=${fmp}`

const getDataApi=()=>{
    const getFirstChart = axios.get(stockChartApi)
    const getSecondChart = axios.get(stockChart2Api)
    const getThirdChart = axios.get(stockChart3Api)
    return [getFirstChart,getSecondChart,getThirdChart]
}

// 股票圖表資料
const stockChart = ref()
const stockChart2 = ref()
const stockChart3 = ref()

const stockChartRev = computed(() =>
  stockChart.value ? stockChart.value.reverse() : []
)

const stockChart2Rev = computed(() =>
  stockChart2.value ? stockChart2.value.reverse() : []
)

const stockChart3Rev = computed(() =>
  stockChart3.value ? stockChart3.value.reverse() : []
)

const getData = () => {
  Promise.all(getDataApi())
    .then((res) => {
      stockChart.value = res[0].data.historical
      stockChart2.value = res[1].data.historical
      stockChart3.value = res[2].data.historical
    })
    .catch((rej) => {
      console.log(rej)
    })
}

onMounted(() => {
  getData()
})

// 多支股票
const fix = (stock) => {
  const data = stock
    ? stock.map((v) => {
        const dateTimeString = v.date // 日期
        let milliseconds // 換算後的時間
        const dateObject = new Date(dateTimeString)
        milliseconds = dateObject.getTime()
        return [milliseconds, v.close]
      })
    : []
  return data
}

const stockChartFix = computed(() => {
  return fix(stockChartRev.value)
})

const stockChartFix2 = computed(() => {
  return fix(stockChart2Rev.value)
})

const stockChartFix3 = computed(() => {
  return fix(stockChart3Rev.value)
})

// 績效圖表
const chartOptionsMulti = computed(() => {
  return {
    // 預設選第五個選擇器(1y)
    rangeSelector: {
      selected: 4,
    },
    yAxis: {
      // y軸樣式
      labels: {
        format: '{#if (gt value 0)}+{/if}{value}%',
      },
      // 貫穿圖表的線(基準線)
      plotLines: [
        {
          value: 0,    //放在值是0的位置
          width: 2,
          color: 'silver',
        },
      ],
    },
    plotOptions: {
      series: {
        //數值或是%數比較
        compare: 'percent',
        //圖是否秀在導航列
        showInNavigator: true,
      },
    },
    tooltip: {
      // 提示框的樣式
      pointFormat:
        '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
      // Y值小數點幾位  
      valueDecimals: 2,
      // 提示框同時顯示
      split: true,
    },

    series: [
      {
        name:`${id}`,
        data:stockChartFix.value
      },
      {
        name:'meta',
        data:stockChartFix2.value
      },
      {
        name:'googl',
        data:stockChartFix3.value
      }
    ]
  }
})

</script>

資料部分

首先透過promise.all把三支股票資料給送進來
我要的股票格式是[時間,收盤價]
所以先用reverse把時間序排好
在透過fix()把資料整理成我要的格式
然後放在chartOptionsMulti裡的series
:options="chartOptionsMulti把資料傳入元件

圖表設定

在備註都有解釋
但想稍微講一下plotLines
plotLines是貫穿圖表的線
預設是水平線
那放在Y軸值為0的位置
就可以當作是比較績效的基準線

https://ithelp.ithome.com.tw/upload/images/20231002/201625734lTwdbqsS1.png

績效圖

https://ithelp.ithome.com.tw/upload/images/20231002/20162573tPTTsqv99e.png

小結:

今天時間較少
code整理的比較不好
請各位多包容一下囉!!

明天預計會完成任意更換股票的績效比較


上一篇
DAY16 - 多重圖表宇宙 - Nuxt3建立複數股票技術分析圖表(2)
下一篇
DAY18 - 誰是賠錢貨- Nuxt3建立HighChart股票績效比較圖(2)
系列文
Nuxt3的初心者之旅:淬鍊出屬於自己的金融投資儀表板30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言