绘制水平射线/线/网格

Question

我想为一些 y 点绘制所谓的“水平射线”或“水平线”。对于我的图表，我找不到任何选项。我尝试使用标记甚至数据标签，但它们无关紧要。我目前正在使用同步融合库来绘制图表。这是图片：

图片：

我怎样才能做到这一点？

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

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 方法来实现。请在下面找到示例链接以供进一步参考。 https://flutter.syncfusion.com/#/cartesian-charts/user-interactions/add-a-point-on-click