如何为高级图表系列创建自定义对象

Question

我有一个自定义数据要显示在高图表列堆栈图，请查看下面的数据和代码

var data = [
        {
            "personId": "ff6b9c90-3961-4995-b05c-eaa8c0689f7c",
            "pid": "PID-2",
            "averageCycleTime": 3.216666666666667,
            "idealCycleTime": 5,
            "cycleDetails": [
                {
                    "cycleId": "4019551e-b6b8-45cb-8df6-1c8c3c9d8995",
                    "visionCycleId": "1",
                    "cycleDuration": 4.433333333333334,
                    "actionDetails": null
                },
                {
                    "cycleId": "de3203bc-9a82-4aaa-a448-ea83d51793e1",
                    "visionCycleId": "2",
                    "cycleDuration": 3.7333333333333334,
                    "actionDetails": null
                },
                {
                    "cycleId": "7418d534-4159-4f0c-8dbe-3271dcf16f24",
                    "visionCycleId": "3",
                    "cycleDuration": 3.7333333333333334,
                    "actionDetails": null
                },
                {
                    "cycleId": "066cc343-7924-4c9e-86df-f062f9987183",
                    "visionCycleId": "0",
                    "cycleDuration": 0.9666666666666667,
                    "actionDetails": null
                }
            ]
        },
        {
            "personId": "6ce9ac4d-f32b-468e-809a-24ae51e00544",
            "pid": "PID-3",
            "averageCycleTime": 0.26666666666666666,
            "idealCycleTime": 5,
            "cycleDetails": [
                {
                    "cycleId": "55aab433-b2d8-4e62-a40b-d6b15610fc37",
                    "visionCycleId": "0",
                    "cycleDuration": 0.26666666666666666,
                    "actionDetails": null
                }
            ]
        },
        {
            "personId": "d7a4362f-07f9-4e64-9ccb-be8d0a194c61",
            "pid": "PID-4",
            "averageCycleTime": 4.133333333333333,
            "idealCycleTime": 5,
            "cycleDetails": [
                {
                    "cycleId": "c664f6ce-a1fd-4d44-96f6-0236181fd784",
                    "visionCycleId": "1",
                    "cycleDuration": 3.8333333333333335,
                    "actionDetails": null
                },
                {
                    "cycleId": "fc53a523-9d32-40ea-af3d-957122fb979e",
                    "visionCycleId": "2",
                    "cycleDuration": 3.8,
                    "actionDetails": null
                },
                {
                    "cycleId": "791666d3-b1f9-4bcf-ad13-8639bfd2ead9",
                    "visionCycleId": "0",
                    "cycleDuration": 4.766666666666667,
                    "actionDetails": null
                }
            ]
        }
    ]

从这个im，使用下面的javascript代码转换成高级图表系列数据

let sortedArray : any;
     sortedArray =  data.sort((a : any,b : any)=> a.pid.localeCompare(b.pid));
let personIDList = sortedArray.map((pItems : any,idx : any)=> pItems.pid);
    const series = customJson.map((value, key) => {
      return {
        name: `Cycle-${key + 1}`,
        data: value.cycleDetails.map((v) => ({
          y: v.cycleDuration,
          videoId: v.cycleId,
        })),
      };
    });

在上面，我根据PID对数组进行排序，然后提取用于设置类别的PID。下面是图表配置，请用数据检查图表配置

{
        chart: {
          type: 'column'
        },
        title: false,
        xAxis: {
            categories: this.personIDList,
            labels :{
              style : {
                color : '#1e272e',
                cursor : 'pointer'
              }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Cycle Time (Sec\'s)'
            },
            gridLineWidth : 1,
            gridLineColor : '#f5f6fa',
            stackLabels: {
                enabled: false,
                style: {
                    fontWeight: 'bold',
                    color: 'gray',
                    textOutline: 'none'
                }
            }
        },
        legend: {
            align: 'center',        
            verticalAlign: 'bottom',        
            backgroundColor: 'white',
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}'
        },
        plotOptions: {
            column: {
                pointWidth : 30,
                borderRadius : 8,
                stacking : 'normal',
                dataLabels: {
                    enabled: false
                },
            },
            series : {
              point: {
                events: {
                  click: function(this : any){                               
                                              
                  }
                }
              }
            }
        },
        series: series
      }

使用上面的代码，我的结果是

​

​

在这张图片中，蓝色的颜色条与PID-2相关，但是这里的所有数据都是与所有PID混合的。我需要根据PID名称在同一列中显示所有PID细节。

我的预期数据表应该是

​

​

Answer 1

您可以通过首先将输入中的所有原始数据提取到嵌套对象中，并使用visionCycleId的顶级键和pid的较低级别键(在代码段中称为rawData )来获得所需的结果。然后，可以使用pid值列表对其进行后处理，以生成用于绘制图表的数据数组：

​

data.sort((a, b) => a.pid.localeCompare(b.pid))

const personIDList = data.map(({ pid }) => pid);

// get the data
const rawData = data.reduce((acc, { pid, cycleDetails }) => {
  cycleDetails.forEach(({ visionCycleId, cycleDuration }) => 
    acc[visionCycleId] = Object.assign(acc[visionCycleId] || {}, { [pid] : cycleDuration }))
  return acc
}, {})

const series = Object.entries(rawData)
  .map(([k, v]) => ({
    name: `Cycle-${k}`,
    data: personIDList.map(pid => v[pid] || 0)
  }))

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  xAxis: {
    categories: personIDList
  },
  yAxis: {
    reversedStacks: false
  },
  accessibility: {
    enabled: false
  },
  series
});

<script src="https://code.highcharts.com/highcharts.js"></script><script type="text/javascript">
  var data = [{
      "personId": "ff6b9c90-3961-4995-b05c-eaa8c0689f7c",
      "pid": "PID-2",
      "averageCycleTime": 3.216666666666667,
      "idealCycleTime": 5,
      "cycleDetails": [{
          "cycleId": "4019551e-b6b8-45cb-8df6-1c8c3c9d8995",
          "visionCycleId": "1",
          "cycleDuration": 4.433333333333334,
          "actionDetails": null
        },
        {
          "cycleId": "de3203bc-9a82-4aaa-a448-ea83d51793e1",
          "visionCycleId": "2",
          "cycleDuration": 3.7333333333333334,
          "actionDetails": null
        },
        {
          "cycleId": "7418d534-4159-4f0c-8dbe-3271dcf16f24",
          "visionCycleId": "3",
          "cycleDuration": 3.7333333333333334,
          "actionDetails": null
        },
        {
          "cycleId": "066cc343-7924-4c9e-86df-f062f9987183",
          "visionCycleId": "0",
          "cycleDuration": 0.9666666666666667,
          "actionDetails": null
        }
      ]
    },
    {
      "personId": "6ce9ac4d-f32b-468e-809a-24ae51e00544",
      "pid": "PID-3",
      "averageCycleTime": 0.26666666666666666,
      "idealCycleTime": 5,
      "cycleDetails": [{
        "cycleId": "55aab433-b2d8-4e62-a40b-d6b15610fc37",
        "visionCycleId": "0",
        "cycleDuration": 0.26666666666666666,
        "actionDetails": null
      }]
    },
    {
      "personId": "d7a4362f-07f9-4e64-9ccb-be8d0a194c61",
      "pid": "PID-4",
      "averageCycleTime": 4.133333333333333,
      "idealCycleTime": 5,
      "cycleDetails": [{
          "cycleId": "c664f6ce-a1fd-4d44-96f6-0236181fd784",
          "visionCycleId": "1",
          "cycleDuration": 3.8333333333333335,
          "actionDetails": null
        },
        {
          "cycleId": "fc53a523-9d32-40ea-af3d-957122fb979e",
          "visionCycleId": "2",
          "cycleDuration": 3.8,
          "actionDetails": null
        },
        {
          "cycleId": "791666d3-b1f9-4bcf-ad13-8639bfd2ead9",
          "visionCycleId": "0",
          "cycleDuration": 4.766666666666667,
          "actionDetails": null
        }
      ]
    }
  ]
</script>
<div id="container"></div>

​

Answer 2

您需要构建高级图表所需的系列结构。例如：

const sortedArray = data.sort((a, b) => a.pid.localeCompare(b.pid));
const personIDList = sortedArray.map((pItems, idx) => pItems.pid);

const series = [];

sortedArray.forEach((pid, pidIndex) => {
    pid.cycleDetails.sort((a, b) => a.visionCycleId.localeCompare(b.visionCycleId));
    pid.cycleDetails.forEach((cycle, index) => {
        if (series[index]) {
            series[index].data.push([pidIndex, cycle.cycleDuration]);
        } else {
            series.push({
                name: 'Cycle-' + cycle.visionCycleId,
                data: [
                    [pidIndex, cycle.cycleDuration]
                ]
            });
        }
    });
});

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    xAxis: {
        categories: personIDList
    },
    yAxis: {
        reversedStacks: false
    },
    series
});

现场演示： http://jsfiddle.net/BlackLabel/2xqncjzw/

API参考： https://api.highcharts.com/highcharts/yAxis.reversedStacks