javascript - 解析JSON数据渲染 Highcharts

Question

这是我的示例 Json，我试图将此数据显示为 Highcharts ，

我的计划是在 Y 轴和 x 轴操作系统版本上选择电池平均值。

所以我可以将每个模型与所有操作系统版本进行比较。

例如，如图所示

电池平均值城市名称将作为操作系统版本，图中的每个投影条都是相同的模型，但具有不同的操作系统版本。

我不知道如何解析 Json 数据以在图中显示

[
   {
      "model": "GOOGLE NEXUS 5X",
      "osversion": "7.0",
      "batteryavg": "100",
      "sampleyqty": "42"
   },
   {
      "model": "LG-H961S",
      "osversion": "6.0",
      "batteryavg": "98",
      "sampleyqty": "73"
   },
   {
      "model": "GOOGLE NEXUS 5X",
      "osversion": "5.1.0",
      "batteryavg": "50",
      "sampleyqty": "53"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "6.2.0",
      "batteryavg": "100",
      "sampleyqty": "55"
   },
   {
      "model": "GOOGLE NEXUS 5",
      "osversion": "6.0",
      "batteryavg": "20",
      "sampleyqty": "9"
   },
   {
      "model": "GOOGLE NEXUS 4",
      "osversion": "5.1",
      "batteryavg": "98",
      "sampleyqty": "4"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "7.1.1",
      "batteryavg": "12",
      "sampleyqty": "22"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "7.1.1",
      "batteryavg": "46",
      "sampleyqty": "64"
   },
   {
      "model": "F5121",
      "osversion": "6.0.1",
      "batteryavg": "94",
      "sampleyqty": "15"
   },
   {
      "model": "GOOGLE NEXUS 5",
      "osversion": "5.1",
      "batteryavg": "34",
      "sampleyqty": "55"
   },
   {
      "model": "SM-A500F",
      "osversion": "5.0.2",
      "batteryavg": "44",
      "sampleyqty": "33"
   },
   {
      "model": "GOOGLE NEXUS 5",
      "osversion": "5.1",
      "batteryavg": "74",
      "sampleyqty": "81"
   },
   {
      "model": "GOOGLE NEXUS 4",
      "osversion": "5.1",
      "batteryavg": "75",
      "sampleyqty": "62"
   },
   {
      "model": "REDMI NOTE 3",
      "osversion": "5.0.2",
      "batteryavg": "13",
      "sampleyqty": "12"
   },
   {
      "model": "GOOGLE NEXUS 5",
      "osversion": "5.1",
      "batteryavg": "87",
      "sampleyqty": "72"
   },
   {
      "model": "GOOGLE NEXUS 5X",
      "osversion": "7.0",
      "batteryavg": "52",
      "sampleyqty": "21"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "7.1.1",
      "batteryavg": "85",
      "sampleyqty": "34"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "7.1.1",
      "batteryavg": "56",
      "sampleyqty": "51"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "7.1.1",
      "batteryavg": "56",
      "sampleyqty": "11"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "7.1.1",
      "batteryavg": "86",
      "sampleyqty": "22"
   },
   {
      "model": "NEXUS 6",
      "osversion": "7.0",
      "batteryavg": "88",
      "sampleyqty": "11"
   },
   {
      "model": "SAMSUNG GALAXY S6",
      "osversion": "5.0",
      "batteryavg": "23",
      "sampleyqty": "84"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "7.1.1",
      "batteryavg": "87",
      "sampleyqty": "12"
   },
   {
      "model": "SAMSUNG GALAXY S6",
      "osversion": "5.0",
      "batteryavg": "65",
      "sampleyqty": "42"
   },
   {
      "model": "GOOGLE NEXUS 4",
      "osversion": "5.1",
      "batteryavg": "56",
      "sampleyqty": "32"
   },
   {
      "model": "LG-H961S",
      "osversion": "6.0",
      "batteryavg": "64",
      "sampleyqty": "54"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "6.0",
      "batteryavg": "53",
      "sampleyqty": "17"
   },
   {
      "model": "GOOGLE NEXUS 5X",
      "osversion": "7.0",
      "batteryavg": "75",
      "sampleyqty": "32"
   },
   {
      "model": "F5321",
      "osversion": "6.0.1",
      "batteryavg": "64",
      "sampleyqty": "52"
   },
   {
      "model": "F5321",
      "osversion": "6.0.1",
      "batteryavg": "64",
      "sampleyqty": "22"
   },
   {
      "model": "ALE-L21",
      "osversion": "5.0.1",
      "batteryavg": "76",
      "sampleyqty": "52"
   },
   {
      "model": "HUAWEI MT7-TL10",
      "osversion": "6.0",
      "batteryavg": "53",
      "sampleyqty": "4"
   },
   {
      "model": "F5321",
      "osversion": "6.0.1",
      "batteryavg": "43",
      "sampleyqty": "51"
   },
   {
      "model": "HUAWEI MT7-TL10",
      "osversion": "6.0",
      "batteryavg": "22",
      "sampleyqty": "20"
   },
   {
      "model": "GOOGLE NEXUS 5X",
      "osversion": "7.0",
      "batteryavg": "32",
      "sampleyqty": "31"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "6.0",
      "batteryavg": "74",
      "sampleyqty": "13"
   },
   {
      "model": "F5321",
      "osversion": "6.0.1",
      "batteryavg": "86",
      "sampleyqty": "52"
   },
   {
      "model": "NEXUS 5",
      "osversion": "6.0",
      "batteryavg": "54",
      "sampleyqty": "22"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "6.0",
      "batteryavg": "77",
      "sampleyqty": "32"
   },
   {
      "model": "GOOGLE NEXUS 5X",
      "osversion": "7.0",
      "batteryavg": "99",
      "sampleyqty": "12"
   }
]

我期待 userSeriesData 数据为

[{
    "data": [
        ["GOOGLE NEXUS 5X", 100],
        ["NEXUS 6P", 77],
        ["HUAWEI MT7-TL10", 53],
        ["LG-H961S", 64],
        ["GOOGLE NEXUS 5", 20],
        ....,
        ....,
        so on

    ],
    "osversion": "6.0"
},{
    "data": [
        ["GOOGLE NEXUS 5X", 50],
        ["GOOGLE NEXUS4", 98],
        ["GOOGLE NEXUS 5", 34],
        ....,
        ....,
        so on

    ],
    "osversion": "5.1.0"
}]

我是这样开始的:

const userSeriesData = userData.reduce((topAccum, parent, index) => {
    if (parent && Object.keys(parent).length > 0) {
        const childReduce = Object.keys(parent).reduce((childAccum, child, i) => {
            childAccum.osversion = parent['osversion']
            childAccum.data.push(parent['modelcode'], parent['sampleqty'])
            return childAccum
        }, {
            osversion: '',
            data: []
        })
        topAccum.series.push(childReduce)
    }
    return topAccum;
}, {
    series: []
})

JFYI:示例 JSON 是虚拟数据，但它看起来或多或少相同，具有随机操作系统版本、型号、电池平均值

非常感谢您的帮助。

Answer 1

这是使用您的部分数据的完整解决方案:

const json = [{
  "model": "GOOGLE NEXUS 5X",
  "osversion": "7.0",
  "batteryavg": "100",
  "sampleyqty": "42"
}, {
  "model": "LG-H961S",
  "osversion": "6.0",
  "batteryavg": "98",
  "sampleyqty": "73"
}, {
  "model": "GOOGLE NEXUS 5X",
  "osversion": "5.1.0",
  "batteryavg": "50",
  "sampleyqty": "53"
}, {
  "model": "NEXUS 6P",
  "osversion": "6.2.0",
  "batteryavg": "100",
  "sampleyqty": "55"
}, {
  "model": "GOOGLE NEXUS 5",
  "osversion": "6.0",
  "batteryavg": "20",
  "sampleyqty": "9"
}, {
  "model": "GOOGLE NEXUS 4",
  "osversion": "5.1",
  "batteryavg": "98",
  "sampleyqty": "4"
}, {
  "model": "NEXUS 6P",
  "osversion": "7.1.1",
  "batteryavg": "12",
  "sampleyqty": "22"
}, {
  "model": "NEXUS 6P",
  "osversion": "7.1.1",
  "batteryavg": "46",
  "sampleyqty": "64"
}, {
  "model": "F5121",
  "osversion": "6.0.1",
  "batteryavg": "94",
  "sampleyqty": "15"
}, {
  "model": "GOOGLE NEXUS 5",
  "osversion": "5.1",
  "batteryavg": "34",
  "sampleyqty": "55"
}, {
  "model": "SM-A500F",
  "osversion": "5.0.2",
  "batteryavg": "44",
  "sampleyqty": "33"
}, {
  "model": "GOOGLE NEXUS 5",
  "osversion": "5.1",
  "batteryavg": "74",
  "sampleyqty": "81"
}, {
  "model": "GOOGLE NEXUS 4",
  "osversion": "5.1",
  "batteryavg": "75",
  "sampleyqty": "62"
}, {
  "model": "REDMI NOTE 3",
  "osversion": "5.0.2",
  "batteryavg": "13",
  "sampleyqty": "12"
}, {
  "model": "GOOGLE NEXUS 5",
  "osversion": "5.1",
  "batteryavg": "87",
  "sampleyqty": "72"
}, {
  "model": "GOOGLE NEXUS 5X",
  "osversion": "7.0",
  "batteryavg": "52",
  "sampleyqty": "21"
}]

// Create categories object in order to remove duplicates
const cats = {}
json.forEach((o) => cats[o.model] = 1)
const categories = Object.keys(cats)

// Parse your data
let series = json.reduce((acc, o) => {
    // Check if array already defined
    if (acc[o.osversion] && acc[o.osversion].data) {
      // Push to array new values
      acc[o.osversion].data.push({x: categories.indexOf(o.model), y: Number(o.batteryavg)})
    } else {
      // Create new array with first value
      acc[o.osversion] = { data: [{x: categories.indexOf(o.model), y: Number(o.batteryavg)}] }
    }
    return acc
  }, {})

// Convert object to array
series = Object.keys(series).map((key) => {
series[key].name = key
  return series[key]
})

series = series.map(serie => {
serie.data.sort((a, b) => a.x - b.x)
  return serie
})
console.log(series, categories)

// Chart options
const options = {
xAxis: { categories: categories },
chart: { type: 'column' },
  series: series
}

// Create chart
const chart = Highcharts.chart('container', options)

实例:https://jsfiddle.net/t698oqmm/

示例输出: