chart_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')
    ];

产生此图表：

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

如果可以使颜色渐变（正负），则为奖励点。

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 值。因为线条是从点到点着色的。否则你会看到蓝线进入负区域。

以上作品：