在另一个变量中显示数组中所有可用的索引位置？

Question

我想访问数组中的所有索引以在不同的变量中显示它们中的每一个以生成 AmChart 图表

let fieldsArrays = [[{ timeAxe: "2019-1-27 0:44:47", fieldsArrays: 1 }],
    [{ timeAxe: "2019-1-27 0:45:18", fieldsArrays: 200 }],
    [{ timeAxe: "2019-1-27 0:47:19", fieldsArrays: 2500 }],
    ];

我尝试了一个 for 循环，但我不确定它是否是正确的方法：

for (var i = 0; i < fieldsArrays.length; i++) {
    var innerArrayLength = fieldsArrays[i].length;
    for (var j = 0; j < innerArrayLength; j++) {
        console.log(fieldsArrays[i][j]);
    }
}

// This displays only one line in the graph. Each index should have it's own line in the AmChart graph
chart.data = fieldsArrays[0];

Answer 1

你可以试试这个：

chart.data = fieldsArrays.flatMap(([{timeAxe, fieldsArrays}]) => ({ timeAxe: new Date(timeAxe), fieldsArrays }));

实例：

let fieldsArrays = [
  [{
    timeAxe: "2019-1-27 0:44:47",
    fieldsArrays: 1
  }],
  [{
    timeAxe: "2019-1-27 0:45:18",
    fieldsArrays: 200
  }],
  [{
    timeAxe: "2019-1-27 0:47:19",
    fieldsArrays: 2500
  }],
];

const chart = am4core.create("chartdiv", am4charts.XYChart);

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
const lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "fieldsArrays";
lineSeries.dataFields.dateX = "timeAxe";
lineSeries.name = "Fields Arrays";
lineSeries.tensionX = 0.8;
var circleBullet = lineSeries.bullets.push(new am4charts.CircleBullet());
circleBullet.circle.stroke = am4core.color("#fff");
circleBullet.circle.strokeWidth = 2;
circleBullet.tooltipText = "{name}: [bold]{valueY}[/]";

// Legend
chart.legend = new am4charts.Legend();

chart.data = fieldsArrays.flatMap(([{timeAxe, fieldsArrays}]) => ({ timeAxe: new Date(timeAxe), fieldsArrays }));

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>

Answer 2

试试这个，

let fieldsArrays = [[{ timeAxe: "2019-1-27 0:44:47", fieldsArrays: 1 }],
  [{ timeAxe: "2019-1-27 0:45:18", fieldsArrays: 200 }],
  [{ timeAxe: "2019-1-27 0:47:19", fieldsArrays: 2500 }],
];

let display_each_index_available_in_fieldsArrays = [];

for (var i = 0; i < fieldsArrays.length; i++) {
    var innerArrayLength = fieldsArrays[i].length;
    for (var j = 0; j < innerArrayLength; j++) {
        display_each_index_available_in_fieldsArrays.push(fieldsArrays[i][j]);
    }
}

console.log(display_each_index_available_in_fieldsArrays);

Answer 3

您已经注意到，您不能简单地将 fieldArrays 变量直接分配给 chart.data 并从中获得多行。 AmCharts 只支持扁平化的对象数组，而不是数组的数组（请注意，我们的每个基本演示都是扁平化数组）。 AmCharts 无法从数组的数组中推断出多行，因此您需要为要从数据集中显示的每一行创建系列对象，并告诉这些系列对象如何解释展平数组中的数据。

您可以采用两种方法来显示数据中的多行。

1) 使用 chart.data，您必须 flatten/combine 并重新映射您的数组数组，以便子数组中的值对应于它们自己的单独值字段属性属性每个系列（行）。给定：

[
  [{ timeAxe: "2019-1-27 0:44:47", fieldsArrays: 1 }, { timeAxe: "2019-1-27 0:45:18",  fieldArrays: 10 }],
  [{ timeAxe: "2019-1-27 0:45:18", fieldsArrays: 200 }, { timeAxe: "2019-1-27 0:47:19", fieldsArrays: 150 }],
  [{ timeAxe: "2019-1-27 0:45:18", fieldsArrays: 2100 }, { timeAxe: "2019-1-27 0:47:19", fieldsArrays: 2500 }]
];

这需要变成这样：

chart.data = [
  {
    timeAxe: "2019-1-27 0:44:47",
    fieldsArrays: 1
  },
  {
    timeAxe: "2019-1-27 0:45:18",
    fieldArrays: 10,
    fieldsArrays2: 200,
    fieldsArrays3: 2100
  },
  {
    timeAxe: "2019-1-27 0:47:19",
    fieldsArrays2: 150,
    fieldsArrays3: 2500
  }
];

每个系列对象都会有 valueY（或 valueX）对应于与之关联的 fieldArrays 属性：

  var series = chart.series.push(new am4charts.LineSeries());
  // ...
  series.dataFields.valueY = "fieldArrays";
  series.dataFields.dateX = "timeAxe";
  // ...
  var series2 = chart.series.push(new am4charts.LineSeries());
  // ...
  series2.dataFields.valueY = "fieldArrays2";
  series2.dataFields.dateX = "timeAxe";
  // ...
  // repeat for each unique valuefield property

2) 如果您更喜欢保留数组的数组，则可以将每个数组直接分配到每个系列自己的 data 数组中，并在所有系列中保持相同的值字段。例如：


fieldArrays.forEach(function(fieldArray, index) {

  var series = chart.series.push(new am4charts.LineSeries());
  series.name = "Series " + (index + 1);
  series.dataFields.valueY = "fieldArrays";
  series.dataFields.dateX = "timeAxe";
  series.data = fieldArray; //assign array[0] to its own line, array[1] to its own line, etc  

  var bullet = series.bullets.push(new am4charts.CircleBullet());
});

下面是基本演示：

var fieldArrays = [
 [
  {
   "timeAxe": "2019-07-26",
   "fieldArrays": 13
  },
  {
   "timeAxe": "2019-07-27",
   "fieldArrays": 12
  },
  {
   "timeAxe": "2019-07-28",
   "fieldArrays": 14
  },
  {
   "timeAxe": "2019-07-29",
   "fieldArrays": 11
  },
  {
   "timeAxe": "2019-07-30",
   "fieldArrays": 10
  },
  {
   "timeAxe": "2019-07-31",
   "fieldArrays": 10
  },
  {
   "timeAxe": "2019-08-01",
   "fieldArrays": 12
  },
  {
   "timeAxe": "2019-08-02",
   "fieldArrays": 15
  },
  {
   "timeAxe": "2019-08-03",
   "fieldArrays": 12
  },
  {
   "timeAxe": "2019-08-04",
   "fieldArrays": 12
  }
 ],
 [
  {
   "timeAxe": "2019-07-26",
   "fieldArrays": 29
  },
  {
   "timeAxe": "2019-07-27",
   "fieldArrays": 30
  },
  {
   "timeAxe": "2019-07-28",
   "fieldArrays": 25
  },
  {
   "timeAxe": "2019-07-29",
   "fieldArrays": 30
  },
  {
   "timeAxe": "2019-07-30",
   "fieldArrays": 30
  },
  {
   "timeAxe": "2019-07-31",
   "fieldArrays": 30
  },
  {
   "timeAxe": "2019-08-01",
   "fieldArrays": 25
  },
  {
   "timeAxe": "2019-08-02",
   "fieldArrays": 22
  },
  {
   "timeAxe": "2019-08-03",
   "fieldArrays": 23
  },
  {
   "timeAxe": "2019-08-04",
   "fieldArrays": 24
  }
 ],
 [
  {
   "timeAxe": "2019-07-26",
   "fieldArrays": 31
  },
  {
   "timeAxe": "2019-07-27",
   "fieldArrays": 45
  },
  {
   "timeAxe": "2019-07-28",
   "fieldArrays": 35
  },
  {
   "timeAxe": "2019-07-29",
   "fieldArrays": 36
  },
  {
   "timeAxe": "2019-07-30",
   "fieldArrays": 43
  },
  {
   "timeAxe": "2019-07-31",
   "fieldArrays": 33
  },
  {
   "timeAxe": "2019-08-01",
   "fieldArrays": 32
  },
  {
   "timeAxe": "2019-08-02",
   "fieldArrays": 33
  },
  {
   "timeAxe": "2019-08-03",
   "fieldArrays": 33
  },
  {
   "timeAxe": "2019-08-04",
   "fieldArrays": 35
  }
 ]
]


// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);


// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;


var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

fieldArrays.forEach(function(fieldArray, index) {

  var series = chart.series.push(new am4charts.LineSeries());
  series.name = "Series " + (index + 1);
  series.dataFields.valueY = "fieldArrays";
  series.dataFields.dateX = "timeAxe";
  series.data = fieldArray;
  
  
  var bullet = series.bullets.push(new am4charts.CircleBullet());
});


// Legend
chart.legend = new am4charts.Legend();

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

在另一个变量中显示数组中所有可用的索引位置？

Display all index positions available in an array in another variable?

javascript

arrays

indexing

amcharts4