flutter - 图表_ flutter : Different color for negative values in line chart

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 值。由于线条是逐点着色的。否则，您会看到蓝线进入负区域。

以上作品: