在多值amChart中是否只能显示一个Y轴?

时间:2019-08-08 06:12:36

标签: javascript amcharts amcharts4

我有一个多值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;
}

0 个答案:

没有答案