如何消除 AmChart 中图表和 X 轴值之间的差距?
How to remove gap between chart and X-axis value in AmChart?
我有一个由外部数据生成的多值 Am-chart 图表(即,在日期选择图表将根据提供的数据加载之后。)但是加载后,我的图表数据如下图所示
如图中黄色突出显示。如何删除 "Date and chart" 之间的 space 。还有什么方法可以在此图表中显示 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 有很多属性可以美化事物,但我无法根据我的要求找到确切的 属性。
这里有专家的帮助。
提前致谢。
最后我得到了答案,因为我提到有一些我找不到的 AmChart 属性。只不过是 "Positioning Axis Elements"
只需在 dataAxis
中添加这些行
dateAxis.renderer.minLabelPosition = 0.05;
dateAxis.renderer.maxLabelPosition = 0.95;
有效。 :)
我有一个由外部数据生成的多值 Am-chart 图表(即,在日期选择图表将根据提供的数据加载之后。)但是加载后,我的图表数据如下图所示
如图中黄色突出显示。如何删除 "Date and chart" 之间的 space 。还有什么方法可以在此图表中显示 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 有很多属性可以美化事物,但我无法根据我的要求找到确切的 属性。
这里有专家的帮助。
提前致谢。
最后我得到了答案,因为我提到有一些我找不到的 AmChart 属性。只不过是 "Positioning Axis Elements"
只需在 dataAxis
dateAxis.renderer.minLabelPosition = 0.05;
dateAxis.renderer.maxLabelPosition = 0.95;
有效。 :)