charts_flutter：折线图中负值使用不同颜色

Question

这段代码：

Widget _chart(ctx) =>
    TimeSeriesChart(_data(),
        customSeriesRenderers: [
            LineRendererConfig(
                customRendererId: 'filled',
                includeArea: true,
            ),
        ],
    );

List<Series<Point, DateTime>> _data() =>
    [
        Series<Point, DateTime>(
            id: 'Data',
            colorFn: (_, __) => MaterialPalette.blue.shadeDefault,
            data: store.data,
            domainFn: (Point p, _) => p.timestamp,
            measureFn: (Point p, _) => p.amount,
        )
            ..setAttribute(rendererIdKey, 'filled')
    ];

生成以下图表：

如何使负数填充区域的颜色不同，例如红色？

如果可以使颜色呈梯度状（正数和负数均适用），则获得额外奖励分。

- wiradikusuma

Answer 1

不确定您是否仍需要此信息，因为该问题是在2019年提出的...据我所知，目前（仍然）无法使其呈现渐变效果。但是，我认为可以通过改变基于值的线条颜色来改变区域的颜色。就像这样：

List<Series<Point, DateTime>> _data() =>
          [
              Series<Point, DateTime>(
                  id: 'Data',
                  colorFn: (Point p, _) { 
                    if(p.amount < 0 || p.amount == 0){ 
                      return MaterialPalette.red.shadeDefault;
                    } else {
                      return MaterialPalette.blue.shadeDefault;
                    }
                  },
                  data: store.data,
                  domainFn: (Point p, _) => p.timestamp,
                  measureFn: (Point p, _) => p.amount,
              )
                  ..setAttribute(rendererIdKey, 'filled')
          ];

如果数值从正变负，请确保插入一个虚假的0值。因为线条是从点到点着色的。否则，您将看到蓝线进入负区域。

上面的方法有效：

- Roderik