当我放大图表时，serie2 消失了......如果我通过从右侧选择光标进行缩放......但是从左侧缩放工作正常!!
我期待在任何情况下都能看到 2 系列，但似乎有时不是......
查看我的 screenshot
知道为什么吗？
我的组件如下所示:
import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import am4themes_animated from '@amcharts/amcharts4/themes/animated';
import {DayAheadService} from '../../_services/day-ahead.service';
import { Subscription } from 'rxjs';
am4core.useTheme(am4themes_animated);
@Component({
providers: [DayAheadService],
selector: 'app-max',
templateUrl: './maximize.component.html',
styleUrls: ['./maximize.component.scss']
})
export class MaximizeComponent implements OnDestroy {
private chart: am4charts.XYChart;
private subscription: Subscription;
clearingsSell: any = [];
clearingsBuy: any = [];
constructor(
private dayAheadService: DayAheadService,
private zone: NgZone) {}
ngOnInit() {
}
ngAfterViewInit() {
this.zone.runOutsideAngular(() => {
let chart = am4core.create('chartdiv', am4charts.XYChart);
chart.paddingRight = 20;
let data1 = [];
let data2 = [];
this.subscription = this.dayAheadService.requestAggClearingsMada('2019-01-01', 'asset' , '2019-01-19' ).subscribe(x => {
this.clearingsSell = x.filter(f => f.direction === 'Sell');
this.clearingsBuy = x.filter(f => f.direction === 'Buy');
for (let i = 1; i < this.clearingsSell.length; i++) {
for (let j = 0; j < 24; j++) {
data1.push({ category : 'Sell', date: new Date(2019, 0, i, j).setHours(j), value1: this.clearingsSell[i].profilesData[j].price });
}
}
for (let i = 1; i < this.clearingsBuy.length; i++) {
for (let j = 0; j < 24; j++) {
data2.push({ category : 'Buy', date: new Date(2019, 0, i, j).setHours(j), value2: this.clearingsBuy[i].profilesData[j].price });
}
}
chart.data = data1.concat(data2);
console.log(chart.data);
});
chart.dateFormatter.inputDateFormat = 'YY-MM-DD HH';
const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 90;
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;
const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
const series = chart.series.push(new am4charts.StepLineSeries());
series.dataFields.dateX = 'date';
series.name = 'Sell Vol.';
series.dataFields.valueY = 'value1';
series.tooltipText = '[#000]{valueY.value}[/]';
series.tooltip.background.fill = am4core.color('#FFF');
series.tooltip.getStrokeFromObject = true;
series.tooltip.background.strokeWidth = 3;
series.tooltip.getFillFromObject = false;
series.fillOpacity = 0.6;
series.strokeWidth = 2;
series.stacked = true;
const series2 = chart.series.push(new am4charts.StepLineSeries());
series2.name = 'Buy Vol.';
series2.dataFields.dateX = 'date';
series2.dataFields.valueY = 'value2';
series2.tooltipText = '[#000]{valueY.value}[/]';
series2.tooltip.background.fill = am4core.color('#FFF');
series2.tooltip.getFillFromObject = false;
series2.tooltip.getStrokeFromObject = true;
series2.tooltip.background.strokeWidth = 3;
series2.sequencedInterpolation = true;
series2.fillOpacity = 0.6;
series2.stacked = true;
series2.strokeWidth = 2;
// Add scrollbar
chart.scrollbarX = new am4charts.XYChartScrollbar();
// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.cursor.snapToSeries = series;
// Add a legend
chart.legend = new am4charts.Legend();
chart.legend.position = 'top';
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
this.zone.runOutsideAngular(() => {
if (this.chart) {
this.chart.dispose();
}
});
}
}
最佳答案
AmCharts 希望基于日期的数据按日期分组，而不是串联，否则您会遇到未定义的行为，例如缩放问题。您需要重写订阅方法以正确聚合所有内容:
clearingsSell = x.filter(f => f.direction === "Sell");
clearingsBuy = x.filter(f => f.direction === "Buy");
//store everything into an object with the date as the key
for (let i = 1; i < clearingsSell.length; i++) {
for (let j = 0; j < 24; j++) {
let date = new Date(2019, 0, i, j).setHours(j);
data[date] = {
date: date,
value1: clearingsSell[i].profilesData[j].price
}
}
}
for (let i = 1; i < clearingsBuy.length; i++) {
for (let j = 0; j < 24; j++) {
let date = new Date(2019, 0, i, j).setHours(j);
if (data[date] === undefined) {
data[date] = {date: date};
}
data[date].value2 = clearingsBuy[i].profilesData[j].price
}
}
//convert grouped data into array, iterating by date
chart.data = Object.keys(data).map(function(date) {
return data[date];
})
请注意，我删除了这些类别，因为它们似乎与您的图表设置无关。这是一个基于您的代码的简化演示:
let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;
let data = {};
let data1 = [];
let data2 = [];
x = getData();
//--- modified subscribe code ---
clearingsSell = x.filter(f => f.direction === "Sell");
clearingsBuy = x.filter(f => f.direction === "Buy");
//store everything into an object with the date as the key
for (let i = 1; i < clearingsSell.length; i++) {
for (let j = 0; j < 24; j++) {
let date = new Date(2019, 0, i, j).setHours(j);
data[date] = {
date: date,
value1: clearingsSell[i].profilesData[j].price
}
}
}
for (let i = 1; i < clearingsBuy.length; i++) {
for (let j = 0; j < 24; j++) {
let date = new Date(2019, 0, i, j).setHours(j);
if (data[date] === undefined) {
data[date] = {date: date};
}
data[date].value2 = clearingsBuy[i].profilesData[j].price
}
}
//convert grouped data into array, iterating by date
chart.data = Object.keys(data).map(function(date) {
return data[date];
});
// --- end modified subscribe code --
chart.dateFormatter.inputDateFormat = "YY-MM-DD HH";
const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 90;
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;
const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
const series = chart.series.push(new am4charts.StepLineSeries());
series.dataFields.dateX = "date";
series.name = "Sell Vol.";
series.dataFields.valueY = "value1";
series.tooltipText = "[#000]{valueY.value}[/]";
series.tooltip.background.fill = am4core.color("#FFF");
series.tooltip.getStrokeFromObject = true;
series.tooltip.background.strokeWidth = 3;
series.tooltip.getFillFromObject = false;
series.fillOpacity = 0.6;
series.strokeWidth = 2;
series.stacked = true;
const series2 = chart.series.push(new am4charts.StepLineSeries());
series2.name = "Buy Vol.";
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "value2";
series2.tooltipText = "[#000]{valueY.value}[/]";
series2.tooltip.background.fill = am4core.color("#FFF");
series2.tooltip.getFillFromObject = false;
series2.tooltip.getStrokeFromObject = true;
series2.tooltip.background.strokeWidth = 3;
series2.sequencedInterpolation = true;
series2.fillOpacity = 0.6;
series2.stacked = true;
series2.strokeWidth = 2;
// Add scrollbar
chart.scrollbarX = new am4charts.XYChartScrollbar();
// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.cursor.snapToSeries = series;
// Add a legend
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
function getData() {
return [
{
direction: "Buy",
profilesData: [
{
price: 14
},
{
price: 12
},
{
price: 16
},
{
price: 13
},
{
price: 10
},
{
price: 10
},
{
price: 18
},
{
price: 13
},
{
price: 17
},
{
price: 12
},
{
price: 18
},
{
price: 10
},
{
price: 10
},
{
price: 17
},
{
price: 17
},
{
price: 20
},
{
price: 13
},
{
price: 17
},
{
price: 13
},
{
price: 12
},
{
price: 16
},
{
price: 16
},
{
price: 13
},
{
price: 11
}
]
},
{
direction: "Buy",
profilesData: [
{
price: 14
},
{
price: 15
},
{
price: 13
},
{
price: 14
},
{
price: 18
},
{
price: 10
},
{
price: 10
},
{
price: 18
},
{
price: 17
},
{
price: 15
},
{
price: 17
},
{
price: 19
},
{
price: 12
},
{
price: 20
},
{
price: 11
},
{
price: 16
},
{
price: 17
},
{
price: 15
},
{
price: 13
},
{
price: 10
},
{
price: 18
},
{
price: 10
},
{
price: 19
},
{
price: 14
}
]
},
{
direction: "Sell",
profilesData: [
{
price: 13
},
{
price: 11
},
{
price: 12
},
{
price: 6
},
{
price: 8
},
{
price: 9
},
{
price: 13
},
{
price: 15
},
{
price: 13
},
{
price: 11
},
{
price: 12
},
{
price: 7
},
{
price: 8
},
{
price: 10
},
{
price: 6
},
{
price: 5
},
{
price: 5
},
{
price: 7
},
{
price: 10
},
{
price: 13
},
{
price: 10
},
{
price: 5
},
{
price: 5
},
{
price: 6
}
]
},
{
direction: "Sell",
profilesData: [
{
price: 11
},
{
price: 7
},
{
price: 5
},
{
price: 12
},
{
price: 7
},
{
price: 5
},
{
price: 13
},
{
price: 6
},
{
price: 12
},
{
price: 11
},
{
price: 11
},
{
price: 10
},
{
price: 5
},
{
price: 12
},
{
price: 10
},
{
price: 7
},
{
price: 7
},
{
price: 7
},
{
price: 14
},
{
price: 14
},
{
price: 11
},
{
price: 12
},
{
price: 13
},
{
price: 8
}
]
}
];
}body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 450px;
}<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>关于angular - 放大 AMCharts 时丢失时间序列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54292567/