javascript - amCharts 中 x 轴上的标签缺失
问题描述
似乎偶数计数标签(2、4 等)被隐藏在我的图表中。
不确定为什么,因为我没有在代码中的任何地方专门设置隐藏这些。
演示:
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>
编辑:
我可以在上面的演示中看到,它有效(Q2 和 Q4 标签对我来说在其他任何地方都隐藏)。
然而,这里的这个小提琴展示了我正在经历的事情。
我所看到的:
解决方案
标签密度由minGridDistance
轴渲染器中的属性控制,如文档中所述。如果要显示更多标签,则需要将其设置为较小的值。
theXAxis.renderer.minGridDistance = 30; //adjust as needed
演示如下:
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>