Метки отсутствуют на оси x в amCharts - PullRequest
Новая
       12

Метки отсутствуют на оси x в amCharts

1 голос
/ 13 февраля 2020

Кажется, что метки с четными числами (2, 4 и c) скрыты в моем графике.

Не знаю, почему, поскольку я специально не скрывал их в коде.

Демо : 

        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 скрыты для меня везде ).

Эта скрипка здесь, однако, демонстрирует то, что я испытываю.

Что я вижу:

enter image description here

1 Ответ

0 голосов
/ 14 февраля 2020

Плотность метки контролируется свойством 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>
...