如何以编程方式从 JSON 数据中为 Plotly Js 添加数据数组中的跟踪？

Question

我想从 API 调用中获取 JSON 数据，然后我想使用 Plotly js 库绘制一个散点图。

到目前为止，我尝试的是从数组中获取唯一标签，这将被视为图中的不同跟踪点，因此相同的标签应该位于一个跟踪下。这是我卡住的部分 - 我无法从有价值的标签创建痕迹并将其传递到数据数组中。

这是我要绘制的数据

  let data2=[    
  {Dim_1: 343.1929931641, Dim_2: -551.9379272461, label: 253},
  {Dim_1: -40.2070579529, Dim_2: 86.8081054688, label: 161},
  {Dim_1: -423.3389282227, Dim_2: -199.669052124, label: 22},
  {Dim_1: 316.681060791, Dim_2: 400.6117858887, label: 372},
  {Dim_1: 311.0101623535, Dim_2: -74.6273803711, label: 14},
  {Dim_1: 694.282043457, Dim_2: 212.6262359619, label: 253},
  {Dim_1: -71.8872528076, Dim_2: 564.7513427734, label: 138},
  {Dim_1: 704.6930541992, Dim_2: -254.9784088135, label: 22},
  {Dim_1: -433.4716186523, Dim_2: 268.049407959, label: 129},
  {Dim_1: -46.0619773865, Dim_2: -388.825378418, label: 28},
  .........
 ]
  for (var item in data2) {
  x_axis.push(data2[item].Dim_1);
  y_axis.push(data2[item].Dim_2);
  labels.push(data2[item].label);
 }

 let trace;
 const uniqueLabels = [...new Set(labels)].sort();
 for (let label of uniqueLabels) {
  data.push(
    (trace = {
      x: x_axis,
      y: y_axis,
      mode: "markers",
      type: "scatter",
      name: "trace-" + label
     })
   );
  }
  Plotly.newPlot("myDiv", data);
  }

所以实际结果是相同的标签名称和相应的值应该考虑在单个跟踪下等等 {Dim_1：694.282043457，Dim_2：212.6262359619，标签：253}， {Dim_1: 343.1929931641, Dim_2: -551.9379272461, label: 253} 由于标签值相同，这两个将属于同一跟踪。

Answer 1

如果您需要按 "label" 对跟踪数据进行分组。
这将与自定义过滤器功能一起使用（参考：Custom filter for object）

function _filter(list, predi) {
    let newList = [];
    for (let i = 0; i < list.length; i++) {
        if (predi(list[i])) newList.push(list[i]);
    }
    return newList;
}

创建唯一名称数组（uniqueLabels）后，使用自定义过滤器功能如下。

for (let label of uniqueLabels) {

    let xValueList = [];
    let yValueList = [];
    let textList = [];

    /* Here is what you need.
    Create filtered array from data2 with custom filter function.    
    */
    let filteredList= _filter(data2, (traceData) => traceData.label == label);

    for(let item of filteredList){      
       xValueList.push(item.Dim_1);
       yValueList.push(item.Dim_2);
       textList.push(item.label);
    }


    trace.push({
      x: xValueList,
      y: yValueList,
      mode: "markers",
      type: "scatter",
      text: textList,
      showlegend: true,
      name: "trace-" + label
     });

  }

Plotly.newPlot("myDiv", data);

PS ：这将有助于如何为问题制作演示。 https://codepen.io/jornathan/pen/jOOrqyQ

如何以编程方式从 JSON 数据中为 Plotly Js 添加数据数组中的跟踪？

How to add traces in data array from JSON data for Plotlyjs programmaticaly?

javascript

angular

plotly.js