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);
  }

SO实际结果将是相同的标签名称，并且在单个跟踪下应考虑相应的值，依此类推 {Dim_1：694.282043457，Dim_2：212.6262359619，标签：253}， {Dim_1：343.1929931641，Dim_2：-551.9379272461，label：253}由于标签值相同，因此这两个将处于相同的跟踪状态。

Answer 1

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

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);

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

$removeUploadedDocFromTestingFolder = array(
          "removeFromTestFolder" =>
            array(
                "bucket" => "my-bucket"
            ),
             "AccessKeys" =>
            array(
                "access_key" => "my access key",
                "seceret_key" => "my secret key"
            )

    ); 
$_SERVER['HOME'] = DIR_HOME;
ini_set('display_errors',1);  error_reporting(E_ALL);
use Aws\S3\S3Client;
use Aws\Common\Credentials\Credentials;

$client = S3Client::factory();

//$objError = new ErrorReporting();

$bucket = $removeUploadedDocFromTestingFolder['removeFromTestFolder']['bucket'];

//testing file setup on local server....
$file1 = "my-file"; 

//File reference on cloud.....Object URL
$file1_cloud = "https://Object URL/myFile/myFile";

echo "here 0";      
$client->deleteObject($bucket, $file1_cloud);

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

如何以编程方式从JSON数据的JSON数据中添加数据数组中的跟踪信息？

1 个答案: