时间戳

首页 > 解决方案 > Amcharts 按属性分组/创建系列

javascript - Amcharts 按属性分组/创建系列

问题描述

我正在使用 Amchart v4 并拥有以下数据。

[

  {
    "date": 1583419378000,
    "id": "A",
    "value": "76"
  },
  {
    "date": 1583419378000,
    "id": "B",
    "value": "72"
  },
  {
    "date": 1583419378000,
    "id": "C",
    "value": "908"
  },
  {
    "date": 1583419379000,
    "id": "A",
    "value": "44"
  },
  {
    "date": 1583419379000,
    "id": "B",
    "value": "704"
  },
  {
    "date": 1583419379000,
    "id": "C",
    "value": "918"
  },
]

x 轴是日期（时间戳），y 轴是值。我想使用 id 在我的折线图上创建 3 条线。

有没有办法按 id 分组以获得 3 行？我目前只有一个“系列”，它会生成包含所有数据的一行？

let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 60;

 chart.yAxes.push(new am4charts.ValueAxis());

// Create series
let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.name = "id";
series.dataFields.dateX = "date";
series.dataFields.category = "id";
series.tooltipText = "{value}"
series.tooltip.pointerOrientation = "vertical";



chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = dateAxis;

我试过series.dataFields.category = "id";

标签： javascriptamchartsseriesamcharts4

解决方案

您需要为要显示的每一行创建单独的系列。图表无法自动为您创建分组系列。

至于处理数据，您有两种选择：

1) 按日期手动对数据进行分组，但为每个 id 创建单独的值字段：

chart.data =[
  {
    "date": 1583419378000,
    "valueA": "76",
    "valueB": "72",
    "valueC": "908"
  },
  // ... etc
];

//create each series and point to each individual value:

seriesA = chart.series.push(new am4charts.LineSeries());
seriesA.dataFields.valueY = "valueA";
series.dataFields.dateX = "date";
seriesA.name = "A"; // Note you have to specify the name directly. You can't map by a property.
// ... repeat

2) 根据 ID 手动创建单独的数据数组，并将数组直接分配给系列而不是图表：

// assumes your data is in a variable called "data"
seriesA = chart.series.push(new am4charts.LineSeries());
seriesA.dataFields.valueY = "value";
seriesA.dataFields.dateX = "date";
seriesA.name = "A"; 
seriesA.data = data.filter(item => item.id == 'A');
// repeat for each id

推荐阅读