Question

我正在使用ng2-charts以角度显示折线图。 X轴仅显示很少的标签，以免拥挤。

但是y轴显示所有值。该图如下所示。

是否可以仅显示显示x轴标签的y值？

我的代码

child: Scaffold(
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {},
  ),
  floatingActionButtonLocation:
  FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: new BottomAppBar(
    shape: CircularNotchedRectangle(),
    child: Container(
      height: 50.0,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 40.0),
        child: Row(
          ...
        ),
      ),
    ),
  ),
  drawer: AppDrawer(),
  body: Column(
    children: <Widget>[
      Container(
        decoration: BoxDecoration(boxShadow: [
          BoxShadow(
            color: Colors.indigo,
          )
        ]),
        height: 70.0,
        child: Row(
          children: <Widget>[
            Center(child: Text("TOOLBAR", style: defaultAppBarTextStyle)),
          ],
        ),
      ),
      Expanded(child: _fragments[_currentIndex]),
    ],
  ),

labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];

  chartData = [
    {
      fill: false,
      data: [21, 22, 24, 21, 21, 22, 23, 24, 23, 22, 24, 25],
      borderColor : 'black',
      pointBackgroundColor: 'black',
      pointHoverBackgroundColor: '#fff',
      pointBorderColor: '#0062ff',
      pointHoverBorderColor: 'red',
    }
  ];

当我更新图表数据时，标签（X值）和y值的数量增加

Answer 1

您可以将选项传递到html文件中的图表

<canvas ... [options]="lineChartOptions" [chartType]="'line'"></canvas>

options需要一个对象，您可以在其中为最大值和其他内容自定义比例

https://www.chartjs.org/docs/latest/charts/line.html

Answer 2

您可以使用@Tharzeer建议的ticks选项：

ticks's callback：

scales: {
  yAxes: [
    {
      ticks: {
        callback: value => value % 20 ? null : value
      }
    }
  ]
}

在此示例中，所有可被20整除的值将被忽略。查看更多选项here。

callback的参数为value, index, values，因此您可以完全控制要跳过的内容。

我与此STACKBLITZ一起创建了一个示例official demo。尝试修改ticks对象中的值（左右标签有2个位置）

减少ng2-chart折线图中以角度显示的值的数量

2 个答案: