flutter - 如何使用 flutter 在 FL Chart 内部绘制标记

Question

我正在尝试将 FL Chart 与 Flutter 结合使用。

https://pub.dev/packages/fl_chart

我想在内部图上贴上标签。

现在图片在左边。

有没有好的样本或者文档？只有我能找到的是API文档。实现难度大。

谢谢。

Answer 1

希望我回答这个问题还不算太晚。但无论谁在寻找答案，这就是我最近发现的:

在 LineChartData 中，您可以根据需要在 lineTouchData 属性中自定义工具提示。下面是我用来在图表中自定义工具提示信息的代码片段。

在 LineTouchData 中，要使用的 touchToolTipData 可能因您绘制的图表类型而异。在我的例子中，我绘制了一个折线图，因此我使用的类是 LineTouchTootipData。您可能需要检查哪个类适合您尝试绘制的图表。

图表示例:

LineChartData(
  ...
  lineTouchData: LineTouchData(
      touchTooltipData: LineTouchTooltipData(
        getTooltipItems: (value) {
          return value
              .map((e) => LineTooltipItem(
                  "${e.y < 0 ? 'Expense:' : 'Income:'} ${e.y.toStringAsFixed(2)} \n Diff: ",
                  TextSetting.text14))
              .toList();
        },
        tooltipBgColor: AppColour.mainBlue,
      )
  ...

)

您可以尝试查看此示例代码以获得更全面的图表上下文。

https://github.com/imaNNeoFighT/fl_chart/blob/master/example/lib/line_chart/samples/line_chart_sample5.dart