Question

如何在波动图中应用线性梯度？

我尝试过颜色类，但是我只能应用纯色，无法找到在图形栏中使用渐变的方法。

chart.Series<Person,String>(
    id:"Person3",
    colorFn:(_,__)=>chart.MaterialPalette.red.shadeDefault,
    domainFn: (Person dataPoint, _)=>dataPoint.name,
    measureFn: (Person dataPoint, _)=>dataPoint.no,
    data:data2,
  )

为我提供一些应用线性渐变的方法

Answer 1

显然还没有这种功能。我设法将其与以下代码一起使用：

    Widget _buildChart() {
      return Container(
        height: 300,
        child: ShaderMask(
          child: charts.BarChart(
            _createRandomData(),
            animate: true,
            primaryMeasureAxis: new charts.NumericAxisSpec(
                renderSpec: new charts.NoneRenderSpec(), showAxisLine: false),
            domainAxis: new charts.OrdinalAxisSpec(
                showAxisLine: false, renderSpec: new charts.NoneRenderSpec()),
            layoutConfig: new charts.LayoutConfig(
                leftMarginSpec: new charts.MarginSpec.fixedPixel(0),
                topMarginSpec: new charts.MarginSpec.fixedPixel(0),
                rightMarginSpec: new charts.MarginSpec.fixedPixel(0),
                bottomMarginSpec: new charts.MarginSpec.fixedPixel(0)),
            defaultRenderer: new charts.BarRendererConfig(
                cornerStrategy: const charts.ConstCornerStrategy(30)),
          ),
          shaderCallback: (Rect bounds) {
            return LinearGradient(
              begin: Alignment.bottomCenter,
              end: Alignment.topCenter,
              colors: [Color(0xFF51DE93), Color(0xFFFFB540), Color(0xFFFA4169)],
              stops: [
                0.0,
                0.5,
                1.0,
              ],
            ).createShader(bounds);
          },
          blendMode: BlendMode.srcATop,
        ));
     }

结果： gradient chart

Answer 2

AreaSeries图表示例

@override
      Widget build(BuildContext context) {
    final List<Color> color = <Color>[];
        color.add(Colors.blue[50]);
        color.add(Colors.blue[100]);
        color.add(Colors.blue);

    final List<double> stops = <double>[];
    stops.add(0.0);
    stops.add(0.5);
    stops.add(1.0);

    final LinearGradient gradientColors =
        LinearGradient(colors: color, stops: stops);
 return   Container(
                      width: double.infinity,
                      height: 250,
                      child: SfCartesianChart(
                        primaryXAxis: CategoryAxis(),
                        series: <AreaSeries<SalesData, String>>[
                          AreaSeries<SalesData, String>(
                            dataSource: <SalesData>[
                              SalesData('Jan', 85),
                              SalesData('Feb', 58),
                              SalesData('Mar', 64),
                              SalesData('Apr', 62),
                              SalesData('May', 78),
                              SalesData('Jun', 92),
                              SalesData('Jul', 90),

                            ],
                            xValueMapper: (SalesData sales, _) => sales.year,
                            yValueMapper: (SalesData sales, _) => sales.sales,
                            gradient: gradientColors,
                          ),
                        ],
                      ),
                    );

}

Answer 3

使用BoxDecoration的属性Container可以实现它，如下所示：

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 370,
      decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
                color: Colors(0XFFA573FF),
                blurRadius: 10,
                offset: Offset(2, 3)),
          ],
          borderRadius: BorderRadius.all(Radius.circular(18)),
          gradient: LinearGradient(colors: [
            color: Colors(0XFFA573FF),
            color: Colors(0XFF645AFF),
          ], stops: [
            0.35,
            1
          ], begin: Alignment.topLeft, end: Alignment.bottomRight)),
          child: 
              SizedBox(
                  height: 280,
                  width: double.infinity,
                  child: StackedAreaCustomColorLineChart(
                      StackedAreaCustomColorLineChart._createSampleData())
                      // replace child with your chart here
                      ),
    );
  }

如何在颤动图中应用线性梯度？

3 个答案: