时间戳

首页 > 解决方案 > 如何消除 AmChart 中图表和 X 轴值之间的差距？

javascript - 如何消除 AmChart 中图表和 X 轴值之间的差距？

问题描述

我有一个由外部数据生成的多值 Am-chart 图（即，在根据提供的数据加载日期选择图之后。）但是加载后，我的图表显示的数据如下图所示 在此处输入图像描述

如图像中以黄色突出显示的那样。如何删除“日期和图表”之间的空格。还有有没有办法在这个图表中显示 x 轴的线。

下面是我的代码。

createAxisAndSeries( field, name ) {
    // Add cursor
    this._chart.cursor = new am4charts.XYCursor();
    this._chart.colors.step = 6;

    // Create axes
    let dateAxis = this._chart.xAxes.push( new am4charts.DateAxis() );
    dateAxis.dataFields.category = "date";
    dateAxis.renderer.grid.template.location = 0;
    dateAxis.renderer.minGridDistance = 40;

    dateAxis.dateFormatter.inputDateFormat = "YYYY-MM-DD, HH:mm:ss";
    dateAxis.periodChangeDateFormats.setKey("day", "MMM dt");

    let valueAxis = this._chart.yAxes.push( new am4charts.ValueAxis() );

    let series = this._chart.series.push( new am4charts.LineSeries() );
    series.dataFields.valueY = field;
    series.dataFields.dateX = "date";
    series.tensionX = 0.8;
    series.strokeWidth = 2;
    series.strokeOpacity = 5;
    series.yAxis = valueAxis;
    series.name = name;
    series.tooltipText = "{name}: [bold]{valueY}[/]";

    let interfaceColors = new am4core.InterfaceColorSet();
    let bullet = series.bullets.push( new am4charts.CircleBullet() );
    bullet.circle.stroke = interfaceColors.getFor( "background" );
    bullet.circle.strokeWidth = 2;

    valueAxis.renderer.line.strokeOpacity = 1;
    valueAxis.renderer.line.strokeWidth = 2;
    valueAxis.renderer.line.stroke = series.stroke;
    valueAxis.renderer.labels.template.fill = series.stroke;
    valueAxis.renderer.grid.template.disabled = true;
}

我知道 Am-chart 有许多美化事物的属性，但我无法根据我的要求找到确切的属性。

来自专家的任何帮助。

提前致谢。

标签： javascriptangularamchartsamcharts4

解决方案

最后我得到了答案，因为我提到有一些我无法找到的 AmChart 属性。只不过是“定位轴元素”

只需添加这些行dataAxis

dateAxis.renderer.minLabelPosition = 0.05;
dateAxis.renderer.maxLabelPosition = 0.95;

有用。:)

推荐阅读