Как мне сохранить положение масштабирования на живой am4chart - PullRequest
Новая
       5

Как мне сохранить положение масштабирования на живой am4chart

0 голосов
/ 13 февраля 2019

Я пытаюсь построить график с помощью библиотеки 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>

1 Ответ

0 голосов
/ 14 февраля 2019

Чтобы сохранить положение масштабирования, установите для свойства keepSelection осей значений значение 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>
...