【发布时间】：2020-03-05 12:16:20
【问题描述】：
我试图强制 Xaxis 标签的范围，只有日期 1/10 或 1 Oct ，对于我有数据的每个点，我的意思是我想从 xaxis 中排除自动 oct nov dec jan 并仅放置那些有数据的，我不介意它没有遵循完美的模式，我只是希望天/月出现在我有值要显示的点下方。
我在这里留下了适应这个 sn-p 的实际代码......它显示月份而不是日/月，但我相信它是由于自动呈现 x 轴图例，这是我试图阻止的...... ..对于我自定义的日子，只有数据 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>【问题讨论】：
标签： range amcharts axis-labels