java - 绘制水平射线/线/网格
问题描述
我想为一些 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;
}
我试图用一个有一定宽度的容器来绘制它,但正如你所见,它不起作用。
解决方案
我们建议您可以使用图表小部件中可用的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
推荐阅读
- java - 在 Java 中实现斐波那契矩阵算法
- c++ - C ++ system()函数未运行所有wimdows程序
- python - 我可以将图像列表传递给 ffmpeg-python 的输入法吗
- flutter - 在 Flutter 应用中使用多个提供程序
- data-mining - 如何将我的模型应用于 WEKA 中的新数据集?
- php - 如何让 PHP 停止将 NULL 值识别为数组中的元素?
- r - 如何更改两个重复行中的值以使行变得唯一
- c++ - 我是否用这个 strcpy_s 覆盖了不安全的数据?
- c# - 通过 github 操作将 .net 5 + .net 框架解决方案发布到 azure
- android - Android Studio 为什么标题不起作用?