时间戳

首页 > 解决方案 > 在 Amcharts 的 JSON 文件中具有多个对象的系列

amcharts - 在 Amcharts 的 JSON 文件中具有多个对象的系列

问题描述

我正在尝试在 amcharts 中为我的图表创建 2 个系列。我有以下 JSON：

[
{"equipament":"pir1","watts":48.0,"currentdate":"2020-02-06T21:11:55"},
{"equipament":"pir2","watts":16.0,"currentdate":"2020-02-06T21:11:55"},
{"equipament":"pir1","watts":3.0,"currentdate":"2020-02-06T21:16:52"},
{"equipament":"pir2","watts":12.0,"currentdate":"2020-02-06T21:16:52"}
]

我需要创建一个图表，我的 X 轴上将是 currentdate 字段，Y 轴上将是瓦特字段，但我需要考虑设备字段。

我在开发中使用 typescript + angular。我设法做到了：

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

  chart.data = [
{"equipament":"pir1","watts":48.0,"currentdate":"2020-02-06T21:11:55"},
{"equipament":"pir2","watts":16.0,"currentdate":"2020-02-06T21:11:55"},
{"equipament":"pir1","watts":3.0,"currentdate":"2020-02-06T21:16:52"},
{"equipament":"pir2","watts":12.0,"currentdate":"2020-02-06T21:16:52"}
  ];

  chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm";

  // Create axes
  let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
  dateAxis.tooltipDateFormat = "yyyy-MM-dd HH:mm";

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

  // Create series PIR1
  let series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = "watts";
  series.dataFields.dateX = "currentdate";
  series.tooltipText = "{equipament}: [bold]{watts}[/]"
  series.name = "pir1";

  // Create series PIR2
  let series2 = chart.series.push(new am4charts.LineSeries());
  series2.dataFields.valueY = "watts";
  series2.dataFields.dateX = "currentdate";
  series2.tooltipText = "{equipament}: [bold]{watts}[/]"
  series2.name = "pir2";

  chart.cursor = new am4charts.XYCursor();
  chart.cursor.xAxis = dateAxis;
  chart.cursor.lineY.disabled = true;
  valueAxis.cursorTooltipEnabled = false;
  chart.scrollbarX = new am4core.Scrollbar();

  chart.legend = new am4charts.Legend();

  this.chart = chart;

但是，在检查图表时，该系列是重叠的。我相信我必须添加一些代码来链接到设备字段。我已经搜索了 amcharts 文档，但没有找到任何关于它的信息。我很感激我能提供帮助。

标签： amcharts

解决方案

amCharts 无法按特定键/值过滤掉每个系列的数据。

最简单的方法是将数据单独分配给每个系列：

series.data = [
  {"equipament":"pir1","watts":48.0,"currentdate":"2020-02-06T21:11:55"},
  {"equipament":"pir1","watts":3.0,"currentdate":"2020-02-06T21:16:52"}
];

series2.data =  [
  {"equipament":"pir2","watts":16.0,"currentdate":"2020-02-06T21:11:55"},
  {"equipament":"pir2","watts":12.0,"currentdate":"2020-02-06T21:16:52"}
];

这样你就不用设置chart.data了。

推荐阅读