0

我正在使用(下)创建一个简单的条形图,fl_chart并且需要使用图标作为 x 标题(而不是文本)。例如,用图标替换下面的0, 1, 2, 。3

在此处输入图像描述

下面是生成当前条形图的代码。是否可以添加图标/PNG 作为标题?getBottomTitles返回SideTitles哪个只能是字符串?

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'bar_data.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'bar_data.dart';


class BarChartWidget extends StatelessWidget {
  final double barWidth = 50;

  @override
  Widget build(BuildContext context) => BarChart(
    BarChartData(
      alignment: BarChartAlignment.center,
      maxY: 20,
      minY: 0,
      groupsSpace: 30,
      borderData: FlBorderData(show: false),
      barTouchData: BarTouchData(
        enabled: true,
        touchTooltipData: BarTouchTooltipData(
          tooltipBgColor: Colors.white,
          tooltipRoundedRadius: 8,
        )
      ),
      titlesData: FlTitlesData(
        topTitles: BarTitles.getTopBottomTitles(),
        bottomTitles: BarTitles.getTopBottomTitles(),
        leftTitles: BarTitles.getSideTitles(),
        rightTitles: BarTitles.getSideTitles(),
      ),
      gridData: FlGridData(
        drawHorizontalLine: false,
      ),
      barGroups: BarData.barData
          .map(
            (data) => BarChartGroupData(
              x: data.id,
              showingTooltipIndicators: [0],
              barRods: [
                BarChartRodData(
                  y: data.y,
                  width: barWidth,
                  colors: [data.color],
                  borderRadius: data.y > 0
                      ? const BorderRadius.only(
                          topLeft: Radius.circular(6),
                          topRight: Radius.circular(6),
                        )
                      : const BorderRadius.only(
                          bottomLeft: Radius.circular(6),
                          bottomRight: Radius.circular(6),
                        ),
                ),
              ],
            ),
          )
          .toList(),
    ),
  );
}
4

1 回答 1

0

首先,非常漂亮的图表:)。

然后,这是 fl_chart 的创建者的响应:

你好。目前无法在标题中支持小部件。(我希望我们将来可以实现它)

作为一种解决方法,您可以使用图标字体来实现图标而不是文本。 https://github.com/imaNNeoFightT/fl_chart/issues/880

于 2022-01-29T14:50:45.017 回答