Ряды с несколькими объектами в файле JSON в Amcharts - PullRequest
Новая
       1

Ряды с несколькими объектами в файле JSON в Amcharts

0 голосов
/ 08 февраля 2020

Я пытаюсь создать 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 будет поле Watts, но мне нужно взять в поле equipament.

Я использую машинопись + 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, но ничего не нашел по этому поводу. Я ценю, что могу помочь.

1 Ответ

1 голос
/ 08 февраля 2020

amCharts не может отфильтровать данные для каждой серии по указанному c ключу / значению.

Самый простой способ - назначить данные каждой серии индивидуально: 

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.

...