Как отобразить значение данных элемента при клике внутри флаттера

Question

Я использую библиотеку charts_flutter в одном из своих проектов и хотел бы отображать значение данных при нажатии на каждый элемент гистограммы.Возможно ли это?

var data = [
  new ClicksPerYear('2016', 12, Colors.red),
  new ClicksPerYear('2017', 42, Colors.blue),
  new ClicksPerYear('2018', counter, Colors.green),
];

var series = [
  new charts.Series(
    id: 'Clicks',
    data: data,
    domainFn: (ClicksPerYear clickData, _) => clickData.year,
    measureFn: (ClicksPerYear clickData, _) => clickData.clicks,
    colorFn: (ClicksPerYear clickData, _) => clickData.color,
  )
];
var barChart = new charts.BarChart(
      series,
      animate: true,
);

Answer 1

Нашел решение из проблем Github

https://github.com/google/charts/issues/58

Чтобы получить значение, используйте SelectionModelConfig.changedListener.

Расширьте CircleSymbolRenderer (для LinePointHighlighter.symbolRenderer) и переопределитеметод краски.Внутри вы можете рисовать пользовательские объекты относительно выбранной точки.

Возможно, в будущем авторы упростят эту задачу, но сейчас вы используете этот метод для изменения процесса рендеринга выбранной точки любым способом, который вам нужен (используяМетоды ChartCanvas)

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()
        )
      ],
      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, 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("1", style: textStyle),
        (bounds.left).round(),
        (bounds.top - 28).round()
    );
  }
}
class LinearSales {
  final int year;
  final int sales;
  LinearSales(this.year, this.sales);
}

Answer 2

Похоже, что приведенный пример для charts_flutter делает нечто очень похожее на то, что вы хотите сделать.

В частности, смотрите в методе сборки для ссылки на _onSelectionChanged метод:

Пример выбора на GitHub для charts_flutter