Я использую amcharts 4, и когда данные перезагружаются, он сбрасывает уровень масштабирования. Как мне предотвратить это? У меня два тайм-аута, но я не думаю, что они вызывают проблему, потому что я попытался удалить их, но проблема все еще существовала.
Я предполагаю, что проблема вызвана тем, как я инициировал или установил оси, но не смог исправить это самостоятельно.
Еще одна причина может заключаться в том, как я использовал анализируемое событие.
Вот мой код:
componentDidMount = () => {
setTimeout(() => {
try {
const {onChangeSettings, widgetData, token} = this.props;
let chart = am4core.create(this.state.key, am4charts.XYChart);
chart.padding(0, 30, 0, 0);
chart.dataSource.requestOptions.requestHeaders = [
{
'key': 'Authorization',
'value': token
}
];
let title = chart
.titles
.create();
title.text = widgetData.graph.name;
title.fontSize = 17;
title.fontFamily = "Verdana, Geneva, sans-serif";
chart.dataSource.parser.options.dateFormat = 'i';
chart.preloader.disabled = true;
chart.dataSource.keepCount = true;
chart.dataSource.disableCache = true;
if (widgetData.graph.time_range.last) {
chart.dataSource.url = `${DashboardApi
.service_url}/bus?method=${widgetData
.graph
.data_type}&interval=${widgetData
.graph
.data_range}&ids=${widgetData
.measurements
.map(m => m.id)
.join(',')}&from=${moment(new Date(new Date().getTime() - timeEnum[widgetData.graph.time_range.range] * widgetData.graph.time_range.time))
.format('YYYY-MM-DD[T]HH:mm:ss.SSS[Z]')}&to=${moment(new Date())
.format('YYYY-MM-DD[T]HH:mm:ss.SSS[Z]')}&offset=0&count=20`;
} else {
chart.dataSource.url = `${DashboardApi
.service_url}/bus?method=${widgetData
.graph
.data_type}&interval=${widgetData
.graph
.data_range}&ids=${widgetData
.measurements
.map(m => m.id)
.join(',')}&from=${moment(new Date(widgetData.graph.time_range.start))
.format('YYYY-MM-DD[T]HH:mm:ss.SSS[Z]')}&to=${moment(new Date(widgetData.graph.time_range.end))
.format('YYYY-MM-DD[T]HH:mm:ss.SSS[Z]')}&offset=0&count=20`;
}
chart
.dataSource
.events
.on("parseended", (ev) => {
var data = ev.target.data;
for (let i = 0; i < data.length; i++) {
data[i]
.measurements
.map(m => {
let foundMeas = widgetData
.measurements
.find(measurement => measurement.id === m.id);
data[i][foundMeas.id] = m.value;
let t = new Date(data[i].date);
data[i]['date'] = t;
});
}
this.refreshReq = setTimeout(() => {
if (widgetData.graph.time_range.last) {
chart.dataSource.url = `${DashboardApi
.service_url}/bus?method=${widgetData
.graph
.data_type}&interval=${widgetData
.graph
.data_range}&ids=${widgetData
.measurements
.map(m => m.id)
.join(',')}&from=${moment(new Date(new Date().getTime() - timeEnum[widgetData.graph.time_range.range] * widgetData.graph.time_range.time))
.format('YYYY-MM-DD[T]HH:mm:ss.SSS[Z]')}&to=${moment(new Date())
.format('YYYY-MM-DD[T]HH:mm:ss.SSS[Z]')}&offset=0&count=20`;
} else {
chart.dataSource.url = `${DashboardApi
.service_url}/bus?method=${widgetData
.graph
.data_type}&interval=${widgetData
.graph
.data_range}&ids=${widgetData
.measurements
.map(m => m.id)
.join(',')}&from=${moment(new Date(widgetData.graph.time_range.start))
.format('YYYY-MM-DD[T]HH:mm:ss.SSS[Z]')}&to=${moment(new Date(widgetData.graph.time_range.end))
.format('YYYY-MM-DD[T]HH:mm:ss.SSS[Z]')}&offset=0&count=20`;
}
chart
.dataSource
.load();
}, widgetData.graph.request_interval);
});
var categoryAxis = chart
.xAxes
.push(new am4charts.DateAxis());
categoryAxis.dataFields.category = "date";
categoryAxis.renderer.minGridDistance = 60;
categoryAxis.renderer.grid.template.location = 0.5;
categoryAxis.startLocation = 0.5;
categoryAxis.endLocation = 0.5;
categoryAxis.events.on('startchanged', (e) => {
console.log(e.target.minZoomed);
})
chart
.yAxes
.push(new am4charts.ValueAxis());
chart.cursor = new am4charts.XYCursor();
chart.legend = new am4charts.Legend();
chart.legend.fontSize = 11;
chart.legend.draggable = true;
chart.legend.resizable = true;
chart.legend.marginBottom = 12;
chart.legend.fontFamily = "Verdana, Geneva, sans-serif";
let scrollbarX = new am4charts.XYChartScrollbar();
let tempSeries;
if (widgetData.graph.type === 'Line') {
widgetData
.measurements
.map((m, i) => {
tempSeries = chart
.series
.push(new am4charts.LineSeries());
tempSeries.dataFields.valueY = m.id;
tempSeries.dataFields.dateX = "date";
tempSeries.name = m.name;
tempSeries.strokeWidth = 1;
tempSeries.fillOpacity = 1;
var gradient = new am4core.LinearGradient();
gradient.addColor(chart.colors.getIndex(i), 0.2);
gradient.addColor(chart.colors.getIndex(i), 0);
tempSeries.fill = gradient;
tempSeries.tooltipText = "{name}: {valueY.value}";
tempSeries.tooltip.getFillFromObject = false;
tempSeries.tooltip.background.fill = am4core.color(chart.colors.getIndex(i));
scrollbarX
.series
.push(tempSeries);
});
} else {
widgetData
.measurements
.map((m, i) => {
tempSeries = chart
.series
.push(new am4charts.ColumnSeries());
tempSeries.dataFields.valueY = m.id;
tempSeries.dataFields.dateX = "date";
tempSeries.name = m.name;
tempSeries.strokeWidth = 1;
tempSeries.tooltipText = "{name}: {valueY.value}";
scrollbarX
.series
.push(tempSeries);
});
}
chart.scrollbarX = scrollbarX;
chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.filePrefix = 'ASYA';
chart.exporting.menu.items = [
{
"label": "...",
"menu": [
{
"label": "Görüntü",
"menu": [
{
"type": "png",
"label": "PNG"
}, {
"type": "jpg",
"label": "JPG"
}, {
"type": "gif",
"label": "GIF"
}, {
"type": "svg",
"label": "SVG"
}, {
"type": "pdf",
"label": "PDF"
}
]
}, {
"label": "Data",
"menu": [
{
"type": "json",
"label": "JSON"
}, {
"type": "csv",
"label": "CSV"
}, {
"type": "xlsx",
"label": "XLSX"
}
]
}, {
"label": "Yazdır",
"type": "print"
}, {
"label": "Tablo",
"type": "custom",
options: {
callback: function () {
// create a table
var holder = document.createElement("div");
holder.className = "chart-data";
var table = document.createElement("table");
table.id = 'chart-data-table'
holder.appendChild(table);
var tr,
td;
if (chart.data.length > 0) {
for (var x = 0; x < chart.data.length; x++) {
if (x == 0) {
tr = document.createElement("tr");
table.appendChild(tr);
td = document.createElement("th");
td.innerHTML = 'Zaman';
td.style.backgroundColor = '#7daa7f';
tr.appendChild(td);
let measurementsArr = chart
.data[0]
.measurements
.map(m => widgetData.measurements.find(measurement => measurement.id === m.id))
measurementsArr.map((m, i) => {
td = document.createElement('th');
td.innerHTML = m.name;
td.style.backgroundColor = chart
.colors
.getIndex(i);
tr.appendChild(td);
})
}
tr = document.createElement("tr");
table.appendChild(tr);
td = document.createElement("td");
td.className = "row-title";
let time = chart.data[x].date;
td.innerHTML = `${oneToTwoDigitConv(time.getDate())}/${oneToTwoDigitConv(time.getMonth() + 1)}/${oneToTwoDigitConv(time.getFullYear())} ${oneToTwoDigitConv(time.getHours())}:${oneToTwoDigitConv(time.getMinutes())}:${oneToTwoDigitConv(time.getSeconds())}`;
tr.appendChild(td);
chart
.data[x]
.measurements
.map(m => {
td = document.createElement('td');
td.innerHTML = m.value;
tr.appendChild(td);
})
}
} else {
tr = document.createElement("tr");
tr.innerHTML = Translator.t('widget.no.measurement.data')
table.appendChild(tr);
}
chart
.chartContainer
.openModal(holder.outerHTML, 'asdasdasd');
}
}
}, {
"label": "Ayarlar",
"type": "custom",
options: {
callback: function () {
onChangeSettings();
}
}
}
]
}
]
this.chart = chart;
} catch (e) {
console.log(e);
}
}, 200);
}
chart.data = []и последующим добавлением новых данных с помощью.addData(). Если нужно, я могу собрать CodePen. - person bryman79 schedule 13.05.2019