Я использую Amchart. Я хочу использовать функцию data groupData. Сначала кажется, что это хорошо работает с функцией groupData. Но если вы уменьшите диапазон дат, это не сработает. он работает, когда есть только одна ось данных. Если создать два dataAxis на Amchart и уменьшить groupData до дневного диапазона, произойдет ошибка. Я хочу знать, если у вас два DataAxis и вам нужно уменьшить диапазон до сегодняшнего дня, он будет работать.
[введите описание изображения здесь] [1]
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<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/themes/animated.js"></script>
<!-- Chart code -->
<script>
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart
var chart = am4core.create("chartdiv", am4charts.XYChart);
var data = [];
var price1 = 1000, price2 = 1200;
var quantity = 3000;
for (var i = 0; i < 5000; i++) {
price1 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);
data.push({ date1: new Date(2015, 0, i), price1: price1 });
}
for (var i = 0; i < 5000; i++) {
price2 += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);
data.push({ date2: new Date(2015, 0, i), price2: price2 });
}
chart.data = data;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.labels.template.fill = am4core.color("#e59165");
dateAxis.groupData = true;
dateAxis.groupIntervals.setAll([
{ timeUnit: "millisecond", count: 1 },
{ timeUnit: "millisecond", count: 10 },
{ timeUnit: "millisecond", count: 100 },
{ timeUnit: "second", count: 1 },
{ timeUnit: "second", count: 10 },
{ timeUnit: "minute", count: 1 },
{ timeUnit: "minute", count: 10 },
{ timeUnit: "hour", count: 1 },
{ timeUnit: "day", count: 1 },
{ timeUnit: "month", count: 1 },
{ timeUnit: "year", count: 1 }
]);
var dateAxis2 = chart.xAxes.push(new am4charts.DateAxis());
dateAxis2.renderer.grid.template.location = 0;
dateAxis2.renderer.labels.template.fill = am4core.color("#dfcc64");
dateAxis2.groupData = true;
dateAxis2.groupIntervals.setAll([
{ timeUnit: "millisecond", count: 1 },
{ timeUnit: "millisecond", count: 10 },
{ timeUnit: "millisecond", count: 100 },
{ timeUnit: "second", count: 1 },
{ timeUnit: "second", count: 10 },
{ timeUnit: "minute", count: 1 },
{ timeUnit: "minute", count: 10 },
{ timeUnit: "hour", count: 1 },
{ timeUnit: "day", count: 1 },
{ timeUnit: "month", count: 1 },
{ timeUnit: "year", count: 1 }
]);
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.labels.template.fill = am4core.color("#e59165");
valueAxis.renderer.minWidth = 60;
var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.tooltip.disabled = true;
valueAxis2.renderer.labels.template.fill = am4core.color("#dfcc64");
valueAxis2.renderer.minWidth = 60;
valueAxis2.syncWithAxis = valueAxis;
var series = chart.series.push(new am4charts.LineSeries());
series.name = "2015";
series.dataFields.dateX = "date1";
series.dataFields.valueY = "price1";
series.yAxis = valueAxis;
series.xAxis = dateAxis;
series.tooltipText = "{valueY.value}";
series.fill = am4core.color("#e59165");
series.stroke = am4core.color("#e59165");
//series.strokeWidth = 3;
var series2 = chart.series.push(new am4charts.LineSeries());
series2.name = "2017";
series2.dataFields.dateX = "date2";
series2.dataFields.valueY = "price2";
series2.yAxis = valueAxis2;
series2.xAxis = dateAxis2;
series2.tooltipText = "{valueY.value}";
series2.fill = am4core.color("#dfcc64");
series2.stroke = am4core.color("#dfcc64");
//series2.strokeWidth = 3;
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis2;
var scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
chart.scrollbarX = scrollbarX;
chart.legend = new am4charts.Legend();
chart.legend.parent = chart.plotContainer;
chart.legend.zIndex = 100;
valueAxis2.renderer.grid.template.strokeOpacity = 0.07;
dateAxis2.renderer.grid.template.strokeOpacity = 0.07;
dateAxis.renderer.grid.template.strokeOpacity = 0.07;
valueAxis.renderer.grid.template.strokeOpacity = 0.07;
}); // end am4core.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>