Question

我正在尝试通过am4chart库构建图表，这是一个实时图表，它每秒更新一次数据集。在值轴上有一个滚动条，用于操纵图表的缩放级别。但是当数据集更新时，图表会自动返回到最大缩放级别。

日期轴运行良好，一旦移动水平滚动条，图表将保持其位置，如果要使垂直滚动条执行相同的方式，应该如何解决。

var newTemp = function(){
	let timestamp = new Date();
    let sensor1 = Math.random() * 10 + 20;
    let sensor2 = Math.random() * 10 + 25;
    let sensor3 = Math.random() * 20 + 80;
	let newTemp = {'time': timestamp, 'sensor1': sensor1, 'sensor2': sensor2, 'sensor3': sensor3};
	return newTemp;
};

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.dataDateFormat = "YYYY/MM/DD JJ:NN";
let data = [];
data.push(newTemp());
chart.data = data;

// Create axes
var timeAxis = chart.xAxes.push(new am4charts.DateAxis());
timeAxis.title.text = "time";
timeAxis.baseInterval = {timeUnit:"second", count: 1};
timeAxis.tooltipDateFormat = "HH:mm, d MMMM";
//dateAxis.renderer.grid.template.location = 0;
//dateAxis.renderer.minGridDistance = 30;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "temps";


// Add  scrollbars
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarY = new am4charts.XYChartScrollbar();
chart.scrollbarY.parent = chart.leftAxesContainer;



// Create series
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "sensor1";
series1.dataFields.dateX = "time";
series1.yAxis = valueAxis;
series1.name = "product temps";
series1.tooltipText = "{name}\n[bold font-size: 20]{valueY}.c[/]";
//series1.fill = chart.colors.getIndex(0);
series1.strokeWidth = 2;
series1.stroke = 'blue';


var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "sensor2";
series2.dataFields.dateX = "time";
series2.yAxis = valueAxis;
series2.name = "air temps";
series2.tooltipText = "{name}\n[bold font-size: 20] {valueY}.c[/]";
//series2.fill = chart.colors.getIndex(0).lighten(0.5);
series2.strokeWidth = 2;
series2.stroke = 'yellow';


var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "sensor3";
series3.dataFields.dateX = "time";
series3.name = "check temps";
series3.yAxis = valueAxis;
series3.tooltipText = "{name}\n[bold font-size: 20]{valueY}.c[/]";
series3.strokeWidth = 2;
series3.stroke = 'red';


// Add cursor
chart.cursor = new am4charts.XYCursor();

// Add legend
chart.legend = new am4charts.Legend();
chart.legend.position = "top";


setInterval(function(){
	let aNewTemp = newTemp();
    aNewTemp.time = Date.parse(aNewTemp.time);

    chart.addData(aNewTemp);

}, 1000);

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

<!doctype html>
<html lang="en">
<head>
<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/maps.js"></script>
</head>

<body>
<div id="chartdiv"></div>
</body>

</html>

Answer 1

要保持缩放位置，请将值轴的keepSelection property设置为true（尚未为DateAxis实现该属性）。

var newTemp = function(){
	let timestamp = new Date();
    let sensor1 = Math.random() * 10 + 20;
    let sensor2 = Math.random() * 10 + 25;
    let sensor3 = Math.random() * 20 + 80;
	let newTemp = {'time': timestamp, 'sensor1': sensor1, 'sensor2': sensor2, 'sensor3': sensor3};
	return newTemp;
};

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.dataDateFormat = "YYYY/MM/DD JJ:NN";
let data = [];
data.push(newTemp());
chart.data = data;

// Create axes
var timeAxis = chart.xAxes.push(new am4charts.DateAxis());
timeAxis.title.text = "time";
timeAxis.baseInterval = {timeUnit:"second", count: 1};
timeAxis.tooltipDateFormat = "HH:mm, d MMMM";
//dateAxis.renderer.grid.template.location = 0;
//dateAxis.renderer.minGridDistance = 30;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.keepSelection = true;
valueAxis.title.text = "temps";


// Add  scrollbars
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarY = new am4charts.XYChartScrollbar();
chart.scrollbarY.parent = chart.leftAxesContainer;



// Create series
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "sensor1";
series1.dataFields.dateX = "time";
series1.yAxis = valueAxis;
series1.name = "product temps";
series1.tooltipText = "{name}\n[bold font-size: 20]{valueY}.c[/]";
//series1.fill = chart.colors.getIndex(0);
series1.strokeWidth = 2;
series1.stroke = 'blue';


var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "sensor2";
series2.dataFields.dateX = "time";
series2.yAxis = valueAxis;
series2.name = "air temps";
series2.tooltipText = "{name}\n[bold font-size: 20] {valueY}.c[/]";
//series2.fill = chart.colors.getIndex(0).lighten(0.5);
series2.strokeWidth = 2;
series2.stroke = 'yellow';


var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "sensor3";
series3.dataFields.dateX = "time";
series3.name = "check temps";
series3.yAxis = valueAxis;
series3.tooltipText = "{name}\n[bold font-size: 20]{valueY}.c[/]";
series3.strokeWidth = 2;
series3.stroke = 'red';


// Add cursor
chart.cursor = new am4charts.XYCursor();

// Add legend
chart.legend = new am4charts.Legend();
chart.legend.position = "top";


setInterval(function(){
	let aNewTemp = newTemp();
    aNewTemp.time = Date.parse(aNewTemp.time);

    chart.addData(aNewTemp);

}, 1000);

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

<!doctype html>
<html lang="en">
<head>
<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/maps.js"></script>
</head>

<body>
<div id="chartdiv"></div>
</body>

</html>

如何在实时am4chart上保持缩放位置

1 个答案: