如何使用charts_Flutter包在Flutter中显示工具提示

Question

我正在使用https://pub.dev/packages/charts_flutter用于我的应用程序中的图表。我想在按PointsLineChart中的点时显示工具提示。

有办法显示工具提示吗？

Answer 1

我为此挣扎了一个小时，终于在github问题中找到了解决方案。我对代码进行了一些修改，将抽头值显示为工具提示。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart';
import 'package:charts_flutter/src/text_element.dart';
import 'package:charts_flutter/src/text_style.dart' as style;
class Chart extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LineChart(
_createSampleData(),
behaviors: [
LinePointHighlighter(
symbolRenderer: CustomCircleSymbolRenderer()  // add this line in behaviours
)
],
selectionModels: [
SelectionModelConfig(
changedListener: (SelectionModel model) {
if(model.hasDatumSelection){
final value = model.selectedSeries[0].measureFn(model.selectedDatum[0].index);
CustomCircleSymbolRenderer.value = value;  // paints the tapped value 
}
}
)
],
);
}
List<Series<LinearSales, int>> _createSampleData() {
final data = [
new LinearSales(0, 5),
new LinearSales(1, 25),
new LinearSales(2, 100),
new LinearSales(3, 75),
];
return [
new Series<LinearSales, int>(
id: 'Sales',
colorFn: (_, __) => MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: data,
)
];
}
}
class CustomCircleSymbolRenderer extends CircleSymbolRenderer {
static String value;
@override
void paint(ChartCanvas canvas, Rectangle<num> bounds, {List<int> dashPattern, Color fillColor, Color strokeColor, double strokeWidthPx}) {
super.paint(canvas, bounds, dashPattern: dashPattern, fillColor: fillColor, strokeColor: strokeColor, strokeWidthPx: strokeWidthPx);
canvas.drawRect(
Rectangle(bounds.left - 5, bounds.top - 30, bounds.width + 10, bounds.height + 10),
fill: Color.white
);
var textStyle = style.TextStyle();
textStyle.color = Color.black;
textStyle.fontSize = 15;
canvas.drawText(
TextElement("$value", style: textStyle),
(bounds.left).round(),
(bounds.top - 28).round()
);
}
}
class LinearSales {
final int year;
final int sales;
LinearSales(this.year, this.sales);
}

Answer 2

@mahesh jamdade解决方案的更新版本，具有null安全性和更新版本油漆覆盖方法。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart';
import 'package:charts_flutter/src/text_element.dart' as charts_text;
import 'package:charts_flutter/src/text_style.dart' as style;
class Chart extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LineChart(
_createSampleData(),
behaviors: [
LinePointHighlighter(
symbolRenderer: CustomCircleSymbolRenderer()  // add this line in behaviours
)
],
selectionModels: [
SelectionModelConfig(
changedListener: (SelectionModel model) {
if(model.hasDatumSelection){
final value = model.selectedSeries[0].measureFn(model.selectedDatum[0].index);
CustomCircleSymbolRenderer.value = value.toString();  // paints the tapped value 
}
}
)
],
);
}
List<Series<LinearSales, int>> _createSampleData() {
final data = [
new LinearSales(0, 5),
new LinearSales(1, 25),
new LinearSales(2, 100),
new LinearSales(3, 75),
];
return [
new Series<LinearSales, int>(
id: 'Sales',
colorFn: (_, __) => MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: data,
)
];
}
}
class CustomCircleSymbolRenderer extends CircleSymbolRenderer {
static String value;
@override
void paint(ChartCanvas canvas, Rectangle<num> bounds, {List<int>? dashPattern,
Color? fillColor,
FillPatternType? fillPattern,
Color? strokeColor,
double? strokeWidthPx}) {
super.paint(canvas, bounds,
dashPattern: dashPattern,
fillColor: fillColor,
fillPattern: fillPattern,
strokeColor: strokeColor,
strokeWidthPx: strokeWidthPx);
canvas.drawRect(
Rectangle(bounds.left - 5, bounds.top - 30, bounds.width + 10, bounds.height + 10),
fill: Color.white
);
var textStyle = style.TextStyle();
textStyle.color = Color.black;
textStyle.fontSize = 15;
canvas.drawText(
charts_text.TextElement("$value", style: textStyle),
(bounds.left).round(),
(bounds.top - 28).round()
);
}
}
class LinearSales {
final int year;
final int sales;
LinearSales(this.year, this.sales);
}

Answer 3

使用上述代码时出现了一些错误，该代码的修改更正版本为：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart';
// import 'package:charts_flutter/src/chart_canvas.dart' as eos;
import 'package:charts_flutter/src/text_element.dart' as TextElement;
import 'package:charts_flutter/src/text_style.dart' as style;
class Chart extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LineChart(
_createSampleData(),
behaviors: [
LinePointHighlighter(
symbolRenderer: CustomCircleSymbolRenderer()
)
],
selectionModels: [
SelectionModelConfig(
changedListener: (SelectionModel model) {
if(model.hasDatumSelection)
print(model.selectedSeries[0].measureFn(model.selectedDatum[0].index));
}
)
],
);
}
List<Series<LinearSales, int>> _createSampleData() {
final data = [
new LinearSales(0, 5),
new LinearSales(1, 25),
new LinearSales(2, 100),
new LinearSales(3, 75),
];
return [
new Series<LinearSales, int>(
id: 'Sales',
colorFn: (_, __) => MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: data,
)
];
}
}
class CustomCircleSymbolRenderer extends CircleSymbolRenderer {
@override
void paint(ChartCanvas canvas, Rectangle<num> bounds, {List<int> dashPattern, Color fillColor, FillPatternType fillPattern, Color strokeColor, double strokeWidthPx}) {
super.paint(canvas, bounds, dashPattern: dashPattern, fillColor: fillColor,fillPattern: fillPattern, strokeColor: strokeColor, strokeWidthPx: strokeWidthPx);
canvas.drawRect(
Rectangle(bounds.left - 5, bounds.top - 30, bounds.width + 10, bounds.height + 10),
fill: Color.white
);
var textStyle = style.TextStyle();
textStyle.color = Color.black;
textStyle.fontSize = 15;
canvas.drawText(
TextElement.TextElement("1", style: textStyle),
(bounds.left).round(),
(bounds.top - 28).round()
);
}
}
class LinearSales {
final int year;
final int sales;
LinearSales(this.year, this.sales);
}