第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何將我的 JSON 結(jié)構(gòu)更改為 chartJS 條形圖 JSON 結(jié)構(gòu)?

如何將我的 JSON 結(jié)構(gòu)更改為 chartJS 條形圖 JSON 結(jié)構(gòu)?

慕容森 2022-10-08 15:23:33
[  0: {flight: "Spicejet", range: "min", Jul 1: 2397, Jul 2: 2397, Jul 3: 2397},1: {flight: "Spicejet", range: "max", Jul 1: 3045, Jul 2: 3045, Jul 3: 3045,},2: {flight: "Spicejet", range: "med", Jul 1: 2789, Jul 2: 2789, Jul 3: 2789,},3: {flight: "Indigo", range: "min", Jul 1: 3000, Jul 2: 3000, Jul 3: 3000,},4: {flight: "Indigo", range: "max", Jul 1: 5000, Jul 2: 5000, Jul 3: 5000,},5: {flight: "Indigo", range: "med", Jul 1: 4000, Jul 2: 4000, Jul 3: 4000,},] 進(jìn)入labels: ["Jul 1","Jul 2","Jul 3"],datasets: [          {            label: "SpiceJet",            data: [3045,3045,3045],          },          {            label: "airways",            data: [5000,5000,5000],          },   ]對于 chartJS reactjs(線圖)。在這種情況下,chartjs 很復(fù)雜,請?jiān)诖颂峁┮恍┙鉀Q方案。在數(shù)據(jù)集中[{data:[僅獲取范圍“最大值”]}]
查看完整描述

1 回答

?
拉風(fēng)的咖菲貓

TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個(gè)贊

雖然關(guān)于目標(biāo)格式的預(yù)期用途的問題尚不清楚,但可以輕松實(shí)現(xiàn)示例的實(shí)際轉(zhuǎn)換。


如果我們假設(shè)所有輸入元素共享相同的數(shù)據(jù)屬性(Jul *在這種情況下),我們可以從任意輸入元素中提取標(biāo)簽。數(shù)據(jù)集可以通過映射輸入數(shù)據(jù)獲得。


// a filter function to determine the data properties we're interested in

let dataPropertiesFilter = (k) =>  k !== "flight" && k !== "range";


let result = {

  // this assumes the first element has all data properties set and subsequent ones share the same properties

  labels: Object.keys(input[0]).filter(dataPropertiesFilter),


  // transforms each input element into the target format

  datasets: input.map(e => {

    return {

      label: e.flight,

      data: Object.keys(e)

        .filter(dataPropertiesFilter)

        .map(v => e[v])

    };

  })

};

這是一個(gè)用于演示的代碼框:https ://codesandbox.io/s/stack-overflow-q-62406854-vzxnq?file=/src/index.js


查看完整回答
反對 回復(fù) 2022-10-08
  • 1 回答
  • 0 關(guān)注
  • 158 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)