Как показать месяц и год вместе на amCharts?

Я пытаюсь показать месяц и год вместе, используя библиотеку amCharts. Я не получаю желаемого результата. Мне интересно, есть ли способ объединить строки с помощью amCharts, чтобы показать месяц и год, сложенные вместе, или что-то в этом роде. Кроме того, если кто-нибудь может помочь с позиционированием заголовка и меток диаграммы, это будет большим подспорьем. У меня есть title.text и заголовок title.text.align, но он не выравнивается.

Вот чего я пытаюсь добиться.

Это то, что я получаю до сих пор.s

Код здесь:

private chart: am4charts.XYChart;

constructor(private zone: NgZone) {}

ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
        let chart = am4core.create("chartdiv", am4charts.XYChart);

        chart.data = [{
            "date": "2018-10",
            "institutional": 5001.9,
            "proRata": 2000,
            "sales": 1999,
        }, {
            "date": "2018-11",
            "institutional": 3001.9,
            "proRata": 500,
            "sales": 2500,
        } ... ];

        console.log(chart.data);

        chart.paddingRight = 0;
        chart.numberFormatter.numberFormat = "'$'#.#'B'";
        chart.dateFormatter.inputDateFormat = "YYYY-MM-DD";

        // Create axes
        // var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
        dateAxis.dateFormatter.dateFormat = "MM-yyyy";
        dateAxis.dataFields.data = "date";
        // dateAxis.dataFields.date = "{date}{yyyy}";
        dateAxis.title.text = "Source: LCD, an offering of S&P Global Market Intelligence";
        dateAxis.align = "left";
        dateAxis.renderer.grid.template.location = 0;
        dateAxis.renderer.minGridDistance = 10;
        dateAxis.renderer.grid.template.disabled = true;

        var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

        var label =
            dateAxis.renderer.labels.template;
        label.wrap = true;
        label.maxWidth = 55;


        var series3 = chart.series.push(new am4charts.ColumnSeries());
        series3.dataFields.valueY = "sales";
        series3.dataFields.dateX = "date";
        series3.name = "Sales";
        series3.tooltipText = "{name}: [bold]{valueY}[/]";
        series3.fill = am4core.color("#5783B7");
        // series3.stacked = true;

        var series2 = chart.series.push(new am4charts.ColumnSeries());
        series2.dataFields.valueY = "proRata";
        series2.dataFields.dateX = "date";
        series2.name = "Pro Rata";
        series2.tooltipText = "{name}: [bold]{valueY}[/]";
        // Do not try to stack on top of previous series
        series2.stacked = true;
        series2.fill = am4core.color("#EF5628");
        series2.align("left");

        // Add cursor
        chart.cursor = new am4charts.XYCursor();

        // Add legend
        chart.legend = new am4charts.Legend();

        // Add Colors
        chart.colors.list = [
            am4core.color("#845EC2"),
            am4core.color("#D65DB1"),
            am4core.color("#FF6F91"),
            am4core.color("#FF9671"),
            am4core.color("#FFC75F"),
            am4core.color("#F9F871")
        ];

        this.chart = chart;

    });
}

person TheLiquidCharcoal    schedule 13.11.2019    source источник


Ответы (1)


Попробуй это:

    dateAxis.renderer.labels.template.textAlign = "middle";
    dateAxis.dateFormats.setKey("month", "MMM\nyyyy");
person zeroin    schedule 14.11.2019