水平绘制 ray/line/grid

Question

我想为一些 y 点画一个所谓的 'horizontal ray' 或 'horizontal line'。我找不到任何选项来为我的图表这样做。我尝试使用标记甚至数据标签，但它们无关紧要。我目前正在使用 syncfusion 库来绘制图表。这是图片：

图片：

我怎样才能做到这一点？

这是我目前使用的代码，笛卡尔图表：

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

class ChartAl extends StatefulWidget {
  @override
  _ChartPageState createState() => _ChartPageState();
}

late List<ChartData> chartData;

class _ChartPageState extends State<ChartAl> {
  late SelectionBehavior _selectionBehavior;

  @override
  void initState() {
    _selectionBehavior = SelectionBehavior(
        // Enables the selection
        enable: true);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    chartData = getData();

    return Container(
      child: SfCartesianChart(
        primaryYAxis: NumericAxis(),
        primaryXAxis: DateTimeAxis(
            intervalType: DateTimeIntervalType.days,
            visibleMinimum: chartData[chartData.length - 29].x,
            visibleMaximum: chartData[chartData.length - 1].x),
        zoomPanBehavior: ZoomPanBehavior(
          enablePanning: true,
        ),
        series: <CartesianSeries<ChartData, DateTime>>[
          LineSeries(
            initialSelectedDataIndexes: <int>[2],
            selectionBehavior: SelectionBehavior(
              enable: true,
            ),
            // markerSettings: MarkerSettings(
            //   isVisible: true,
            //   shape: DataMarkerType.horizontalLine
            // ),
            // dataLabelSettings: DataLabelSettings(
            //     // Renders the data label
            //     isVisible: true),
            dataSource: chartData,
            xValueMapper: (ChartData tendencias, _) => tendencias.x,
            yValueMapper: (ChartData tendencias, _) => tendencias.y,
          )
        ],
        annotations: <CartesianChartAnnotation>[
          CartesianChartAnnotation(
            widget: Container(
              height: 1.0,
              width: 200,
              color: Colors.black,
            ),
            coordinateUnit: CoordinateUnit.point,
            x: DateTime(2018, 1, 10),
            y: 20,
            horizontalAlignment: ChartAlignment.near,
          )
        ],
        trackballBehavior: TrackballBehavior(
            enable: true,
            lineType: TrackballLineType.horizontal,
            tooltipSettings:
                InteractiveTooltip(enable: true, color: Colors.red)),
      ),
    );
  }
}

dynamic getData() {
  List<ChartData> data = [];
  for (int i = 1; i < 35; i++) {
    data.add(ChartData(DateTime(2018, 1, i), getRandomInt(10, 100).toInt()));
  }
  return data;
}

num getRandomInt(num min, num max) {
  final Random random = Random();
  return min + random.nextInt((max - min).toInt());
}

class ChartData {
  ChartData(this.x, this.y);
  final DateTime x;
  final int y;
}

我试着用一个有一定宽度的容器来绘制它，但是如你所见，它不起作用。

Answer 1

我们建议您可以使用我们的图表小部件中提供的 PlotBand 功能来呈现图表中 y 点的水平线。我们还在下面附上了一个简单的图表示例，其中使用 PlotBand 功能在图表中呈现了一条水平线。

SfCartesianChart( 
            primaryXAxis: DateTimeAxis(), 
            primaryYAxis: NumericAxis( 
              plotBands: [ 
                PlotBand( 
                  start: 32, // y-point for with the horizontal line needs to be drawn. 
                  end: 32, 
                  borderColor: Colors.red, 
                  borderWidth: 2, // set the border width for the horizontal line. 
                  associatedAxisStart: DateTime(2002) // set the required value for assicoated x-axis start  property 
                ) 
              ] 
 
            ), 
)

样本：https://www.syncfusion.com/downloads/support/directtrac/347691/ze/f170191_plotband-902619107

有关 Plotband 功能的更多参考，请查看下面的用户指南。 https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#plot-line

另外，如果您需要在点击图表时渲染线条，您可以使用 on PixelToPoint 方法来实现。请在下面找到示例 link 以供进一步参考。 https://flutter.syncfusion.com/#/cartesian-charts/user-interactions/add-a-point-on-click

水平绘制 ray/line/grid

Draw horizontal ray/line/grid

java

charts

android

syncfusion

flutter