javascript - 如何在 amCharts 上同时显示月份和年份？

Question

我正在尝试使用 amCharts 库显示堆叠在一起的月份和年份。我没有得到想要的结果。我想知道是否有任何方法可以使用 amCharts 连接字符串来显示堆叠在一起的月份和年份或类似的内容。另外，如果有人可以帮助定位图表的标题和标签，将会有很大的帮助。我有 title.text 和标题 title.text.align 但它没有对齐。

代码在这里:

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;

    });
}

Answer 1

试试这个:

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