我有一个多值AmChart,我在其中发送动态值,并且按预期方式工作,但是由于我正在动态发送值的百分比值,因此不需要所有行的Y轴。所有行仅一个y轴就足够了。
我能够禁用出现的y轴,并且我还创建了一个y轴(静态y轴),但是它与图表系列不同步。
trend() {
this._chart = am4core.create( "trend_yield", am4charts.XYChart );
this._chart.data = this._TChart;
this._chart.legend = new am4charts.Legend();
this._selectedItems.forEach( selectedItem => {
if ( selectedItem.id != 1 && selectedItem.id != 2 ) {
this.createAxisAndSeries();
let valueAxis = this._chart.yAxes.push( new am4charts.ValueAxis() );
let series = this._chart.series.push( new am4charts.LineSeries() );
series.dataFields.valueY = selectedItem.itemName;
series.dataFields.dateX = "date";
series.tensionX = 0.8;
series.strokeWidth = 2;
series.strokeOpacity = 5;
// series.yAxis = valueAxis;
series.name = selectedItem.itemName;
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.disabled = true; //disables axis line
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.grid.template.disabled = true;
}
} );
if ( this._selectedItems.length > 1 ) {
let valueAxis = this._chart.yAxes.push( new am4charts.ValueAxis() );
valueAxis.autoGridCount = false;
valueAxis.max = 100;
valueAxis.min = 0;
valueAxis.unit = "%";
valueAxis.unitPosition = "right";
valueAxis.renderer.line.strokeOpacity = 1;
valueAxis.renderer.line.strokeWidth = 1;
valueAxis.renderer.line.stroke = am4core.color( "#3787ac" );
// Enable export
this._chart.exporting.menu = new am4core.ExportMenu();
this._chart.exporting.filePrefix = "Yield Chart";
this._chart.exporting.menu.items = [
{
"label": "...",
"menu": [
{ "type": "pdf", "label": "PDF" },
{ "label": "Print", "type": "print" }
]
}
];
}
}
createAxisAndSeries() {
this._chart.cursor = new am4charts.XYCursor();
this._chart.colors.step = 6;
// Create axes
let dateAxis = this._chart.xAxes.push( new am4charts.DateAxis() );
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.renderer.minGridDistance = 40;
dateAxis.renderer.labels.template.location = 0.0001;
dateAxis.renderer.minLabelPosition = 0.05;
dateAxis.renderer.maxLabelPosition = 0.95;
dateAxis.renderer.ticks.template.disabled = false;
dateAxis.renderer.ticks.template.strokeOpacity = 1;
dateAxis.renderer.ticks.template.stroke = am4core.color( "#495C43" );
dateAxis.renderer.ticks.template.strokeWidth = 2;
dateAxis.renderer.ticks.template.length = 10;
dateAxis.renderer.ticks.template.location = 0.5;
dateAxis.renderer.line.strokeOpacity = 1;
dateAxis.renderer.line.strokeWidth = 1;
dateAxis.renderer.line.stroke = am4core.color( "#3787ac" );
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;
}