amCharts 中 x 轴缺失的标签

Question

It seems like even number counted labels (2, 4 etc) are being hidden in my chart.

Unsure why as I haven't specifically set the hide these anywhere in the code.

Demo :

 var chart = am4core.create("dataChart", am4charts.XYChart); chart.data = [{ "xValue": "Q1", "yValue": 6 }, { "xValue": "Q2", "yValue": 7 }, { "xValue": "Q3", "yValue": 3 }, { "xValue": "Q4", "yValue": 2 }, { "xValue": "Q5", "yValue": 9 }]; /* Create axes */ var theXAxis = chart.xAxes.push(new am4charts.CategoryAxis()); theXAxis.dataFields.category = "xValue"; /* Create value axis */ var theYAxis = chart.yAxes.push(new am4charts.ValueAxis()); theYAxis.renderer.labels.template.disabled = true; /* Create series */ var series1 = chart.series.push(new am4charts.LineSeries()); series1.dataFields.valueY = "yValue"; series1.dataFields.categoryX = "xValue"; series1.bullets.push(new am4charts.CircleBullet()); series1.tooltipText = "{valueY} / 10"; series1.fill = "#2c3e96"; series1.fillOpacity = .3; series1.stroke = "#4967fa"; /* Create a cursor */ chart.cursor = new am4charts.XYCursor();

 #dataChart{ width: 100%; height: 500px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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> <div id="dataChart"></div>

Edit:

I can see in the demo above, it works (Q2 and Q4 labels are hidden for me everywhere else).

This fiddle here however, showcases what I'm experiencing.

What I'm seeing:

Answer 1

The label density is controlled by the minGridDistance property in the axis renderer, as mentioned in the documentation . You'll want to set this to a smaller value if you want to show more labels.

theXAxis.renderer.minGridDistance = 30; //adjust as needed

Demo below:

 var chart = am4core.create("dataChart", am4charts.XYChart); chart.data = [{ "xValue": "Q1", "yValue": 6 }, { "xValue": "Q2", "yValue": 7 }, { "xValue": "Q3", "yValue": 3 }, { "xValue": "Q4", "yValue": 2 }, { "xValue": "Q5", "yValue": 9 }]; /* Create axes */ var theXAxis = chart.xAxes.push(new am4charts.CategoryAxis()); theXAxis.dataFields.category = "xValue"; theXAxis.renderer.minGridDistance = 30; /* Create value axis */ var theYAxis = chart.yAxes.push(new am4charts.ValueAxis()); theYAxis.renderer.labels.template.disabled = true; /* Create series */ var series1 = chart.series.push(new am4charts.LineSeries()); series1.dataFields.valueY = "yValue"; series1.dataFields.categoryX = "xValue"; series1.bullets.push(new am4charts.CircleBullet()); series1.tooltipText = "{valueY} / 10"; series1.fill = "#2c3e96"; series1.fillOpacity = .3; series1.stroke = "#4967fa"; /* Create a cursor */ chart.cursor = new am4charts.XYCursor();

 #dataChart { width: 300px; height: 500px; }

 <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> <div id="dataChart"></div>