更改折线图中的轴位置

Question

我正在尝试获取离子应用的图表，其中y轴在右侧

这是我所做的

我的代码：

@ViewChild('barChart', {static: true}) BarChart: ElementRef;

this.bars = new Chart(this.BarChart.nativeElement, {
            type: 'line',
            data: {
                labels: ['S1', 'S2', 'S3', 'S4', 'S5', 'S6', 'S7', 'S8'],
                datasets: [{
                    label: 'Viewers in millions',
                    data: [2.5, 3.8, 5, 6.9, 6.9, 7.5, 10, 17],
                    backgroundColor: 'rgba(88, 172, 230, 0)',
                    borderColor: 'rgb(88, 172, 230)',
                    borderWidth: 1,
                    pointBackgroundColor: 'rgb(88, 172, 230)',
                    pointBorderColor: 'rgb(88, 172, 230)',
                    pointRadius: 5,
                    yAxisID: 'right-y-axis',
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {}
                        },
                        {
                            id: 'right-y-axis',
                            type: 'linear',
                            position: 'right'
                        }]
                }
            }
        });

但是我在左边得到了意外的数字[-0.1，-0.5 ....]

我需要做什么：

因此，我需要删除网格线和左侧的那些数字，以及将x轴更改为reverse，以便它从右侧开始而不是从左侧开始

Answer 1

您的括号错误。而且您不需要其他轴，只需更改现有轴的位置即可。

            options: {
                scales: {
                    yAxes: [{
                            position: 'right',
                            gridLines: {
                                display: false
                            }
                    }],
                    xAxes: [{
                            gridLines: {
                                display: false
                            }
                    }]
                }
            }