Я пытаюсь навязать метки Xaxis для диапазона, только даты 1/10 или 1 октября, для каждой точки, где у меня есть данные, я имею в виду, что я хочу исключить автоматизированный oct nov de c jan из xaxis и размещать только те, у которых есть данные, я не возражаю, если они не следуют идеальному шаблону, я просто хочу, чтобы дни / месяц отображались в точках, где у меня есть значения для отображения.
Я оставляю здесь фактический код, адаптированный к этому фрагменту ... где он показывает месяцы, а не день / месяц, но я верю, что это из-за автоматического c рендеринга легенды оси X это то, что я пытаюсь предотвратить .... в мои индивидуальные дни только с метками данных по оси х ....
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("modalContensfromAjax", am4charts.XYChart);
// Create axes
// var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
//
/**
* Use separate DateFormatter for X axis, so we can set different format
* (this presumes that X axis of type DateAxis was already created)
*/
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.endLocation = 3.5;
dateAxis.renderer.labels.template.horizontalCenter = "right";
dateAxis.renderer.labels.template.verticalCenter = "top";
dateAxis.renderer.labels.template.rotation = 272;
dateAxis.dataFields.category = 'sales';
dateAxis.renderer.minGridDistance = 30;
dateAxis.fontSize = 14;
// // Create series
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "# Incidents ";
var incomingdata ='{"SKATES":[{"date":"2019-10-10","SKATES":1},{"date":"2019-12-16","SKATES":2},{"date":"2020-1-3","SKATES":3},\n' +
'{"date":"2020-1-6","SKATES":4},{"date":"2020-1-7","SKATES":5},{"date":"2020-1-9","SKATES":6},{"date":"2020-1-13","SKATES":8},{"date":"2020-1-15","SKATES":9},{"date":"2020-1-23","SKATES":11},\n' +
'{"date":"2020-1-27","SKATES":12},{"date":"2020-1-28","SKATES":13},{"date":"2020-1-29","SKATES":23}],\n' +
'"SHIPS":[{"date":"2019-11-24","SHIPS":1},{"date":"2019-12-13","SHIPS":2},{"date":"2020-1-6","SHIPS":3},{"date":"2020-1-21","SHIPS":4},{"date":"2020-1-22","SHIPS":6},{"date":"2020-1-24","SHIPS":7},\n' +
'{"date":"2020-1-29","SHIPS":11}],"CARS":[{"date":"2019-11-26","CARS":1},{"date":"2019-12-23","CARS":2},{"date":"2020-1-13","CARS":3}],\n' +
'"MOTORCICLES":[{"date":"2019-12-19","MOTORCICLES":1},{"date":"2020-1-23","MOTORCICLES":2},{"date":"2020-1-28","MOTORCICLES":3},{"date":"2020-1-29","MOTORCICLES":6}],\n' +
'"BICICLES":[{"date":"2020-1-24","BICICLES":1}]}';
var aResult = $.parseJSON(incomingdata);
$.each(aResult, function(key, value) {
createSeries( key, "Series #" + key,value)
});
function createSeries(s, name,seriesVal) {
var series = chart.series.push(new am4charts.LineSeries());
var bullet = series.bullets.push(new am4charts.CircleBullet());
var valueLabel = series.bullets.push(new am4charts.LabelBullet());
valueLabel.label.text = "{valueY}";
valueLabel.label.fontSize = 20;
valueLabel.label.y = -13.5;
bullet.fill = am4core.color("#3f5163");
bullet.fillOpacity = 1;
bullet.strokeWidth = 2;
bullet.circle.radius = 4;
series.dataFields.valueY = s;
series.dataFields.dateX = "date";
series.dataFields.dateX.showTooltipOn = "always";
series.dataFields.dateX.dateFormatter = new am4core.DateFormatter();
series.dataFields.dateX.dateFormat = "yyyy-MM-dd";
// Create series
series.name = name;
var segment = series.segments.template;
segment.interactionsEnabled = true;
var hoverState = segment.states.create("hover");
hoverState.properties.strokeWidth = 6;
var dimmed = segment.states.create("dimmed");
dimmed.properties.stroke = am4core.color("#dadada");
segment.events.on("over", function(event) {
processOver(event.target.parent.parent.parent);
});
segment.events.on("out", function(event) {
processOut(event.target.parent.parent.parent);
});
series.data = eval(seriesVal);
return series;
}
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.legend = new am4charts.Legend();
chart.legend.position = "right";
chart.legend.scrollable = true;
chart.legend.itemContainers.template.events.on("over", function(event) {
processOver(event.target.dataItem.dataContext);
})
chart.legend.itemContainers.template.events.on("out", function(event) {
processOut(event.target.dataItem.dataContext);
})
function processOver(hoveredSeries) {
hoveredSeries.toFront();
hoveredSeries.segments.each(function(segment) {
segment.setState("hover");
})
chart.series.each(function(series) {
if (series != hoveredSeries) {
series.segments.each(function(segment) {
segment.setState("dimmed");
})
series.bulletsContainer.setState("dimmed");
}
});
}
function processOut(hoveredSeries) {
chart.series.each(function(series) {
series.segments.each(function(segment) {
segment.setState("default");
})
series.bulletsContainer.setState("default");
});
}
}); // end am4core.ready()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<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/themes/animated.js"></script>
</head>
<body>
<div id="modalContensfromAjax">
</div>
</body>
</html>