如何根据 Flutter 中的值自定义 colored颜色 Syncfusion BarChart 列

发布于07月15日

有没有办法根据值更改列的 colored颜色？

最高/最低列需要有不同的 colored颜色，以将其与其他值区分开来.

我正在使用syncfusion-charts包中的BarSeries创建图表
我的数据是灵活的变化取决于用户不能硬编码列 colored颜色

推荐答案

要 for each 条形图定制不同 colored颜色的条形图，需要实现BarSeries.onCreateRenderer.请看下面的示例:

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: BarHorizontal(),
    );
  }
}

/// Renders customized Column chart
class BarHorizontal extends StatefulWidget {
  /// Creates customized Column chart
  const BarHorizontal({Key? key}) : super(key: key);

  @override
  State<BarHorizontal> createState() => _BarHorizontalState();
}

class _BarHorizontalState extends State<BarHorizontal> {
  _BarHorizontalState();

  @override
  Widget build(BuildContext context) {
    return SfCartesianChart(
      title: ChartTitle(text: 'PC vendor shipments - 2015 Q1'),
      primaryXAxis: CategoryAxis(
        majorGridLines: const MajorGridLines(width: 0),
      ),
      primaryYAxis: NumericAxis(
          labelFormat: '{value}M',
          title: AxisTitle(text: 'Shipments in million'),
          majorGridLines: const MajorGridLines(width: 0),
          majorTickLines: const MajorTickLines(size: 0)),
      series: <ChartSeries<ChartSampleData, String>>[
        BarSeries<ChartSampleData, String>(
          onCreateRenderer: (ChartSeries<ChartSampleData, String> series) =>
              _CustomColumnSeriesRenderer(),
          dataLabelSettings: const DataLabelSettings(
              isVisible: true, labelAlignment: ChartDataLabelAlignment.middle),
          dataSource: <ChartSampleData>[
            ChartSampleData(x: 'HP Inc', y: 12.54),
            ChartSampleData(x: 'Lenovo', y: 13.46),
            ChartSampleData(x: 'Dell', y: 9.18),
            ChartSampleData(x: 'Apple', y: 4.56),
            ChartSampleData(x: 'Asus', y: 5.29),
          ],
          width: 0.8,
          xValueMapper: (ChartSampleData sales, _) => sales.x as String,
          yValueMapper: (ChartSampleData sales, _) => sales.y,
        )
      ],
    );
  }
}

class _CustomColumnSeriesRenderer extends BarSeriesRenderer {
  _CustomColumnSeriesRenderer();

  @override
  BarSegment createSegment() {
    return _ColumnCustomPainter();
  }
}

class _ColumnCustomPainter extends BarSegment {
  final colorList = [
    const Color.fromRGBO(53, 92, 125, 1),
    const Color.fromRGBO(192, 108, 132, 1),
    const Color.fromRGBO(246, 114, 128, 1),
    const Color.fromRGBO(248, 177, 149, 1),
    const Color.fromRGBO(116, 180, 155, 1)
  ];

  @override
  Paint getFillPaint() {
    final Paint customerFillPaint = Paint();
    customerFillPaint.isAntiAlias = false;
    customerFillPaint.color = colorList[currentSegmentIndex!];
    customerFillPaint.style = PaintingStyle.fill;
    return customerFillPaint;
  }
}

class ChartSampleData {
  ChartSampleData({this.x, this.y});

  final dynamic x;
  final num? y;
}