如何根据 12 小时格式在 x 轴上以 2:00 小时为间隔绘制小时数？ Syncfusion Flutter 图

编程问答 2022-05-26

问题描述

我想要实现的是我想在 x 轴上绘制从当前小时开始的接下来 12 小时的小时数，间隔为 2:00 小时，但基于 12 小时格式，我在下面添加了一张图片，以供参考我正在尝试实现的目标。我正在使用 syncfusion Flutter 图表库。

[example chart]

我希望我的 x 轴绘制为 8:00 AM....10:00 AM....12:00 PM....2:00 PM...4:00 PM...

所以在 12:00 之后我想要 2:00 而不是 14:00 以及 AM 和 PM 的差异。

关于如何在颤振中实现这一目标的任何帮助/建议？ 我在下面添加了代码。

/// Returns the Cartesian chart with default numeric x and y axis.
 SfCartesianChart getChart() {
  return SfCartesianChart(
  plotAreaBorderWidth: 0,legend: Legend(isVisible: true,position: LegendPosition.top),/// X axis as datetime axis placed here.
  primaryXAxis: DateTimeAxis(
    minimum: DateTime.Now(),intervalType: DateTimeIntervalType.hours,desiredIntervals: 2,interval: 2,maximum: DateTime.Now().add(
      Duration(hours: 12,minutes: 59,seconds: 59),),primaryYAxis: NumericAxis(
      title: AxisTitle(text: 'Peak Occupancy (%)'),axisLine: AxisLine(width: 0),majorTickLines: MajorTickLines(size: 0)),series: getDefaultNumericSeries(),tooltipBehavior: TooltipBehavior(
      enable: true,format: 'score: point.y',canShowMarker: false),);
}

/// Returns the list of Chart series
/// which need to render on the default numeric axis.
List<ColumnSeries<ChartSampleData,DateTime>> getDefaultNumericSeries() {
int currentYear = DateTime.Now().year;
int currentMonth = DateTime.Now().month;
int currentDay = DateTime.Now().day;
int currentHour = DateTime.Now().hour;

int getHour(int hour) {
  return (DateTime.Now().add(Duration(hours: hour))).hour;
}

final List<ChartSampleData> chartData = <ChartSampleData>[
  ChartSampleData(
    xValue: DateTime(currentYear,currentMonth,currentDay,currentHour),yValue: 240,secondSeriesYValue: 236,ChartSampleData(
      xValue: DateTime(currentYear,getHour(4)),yValue: 250,secondSeriesYValue: 242),getHour(8)),yValue: 281,secondSeriesYValue: 313),getHour(12)),yValue: 358,secondSeriesYValue: 359),getHour(16)),yValue: 237,secondSeriesYValue: 272)
];
return <ColumnSeries<ChartSampleData,DateTime>>[
  ///first series named "Australia".
  ColumnSeries<ChartSampleData,DateTime>(
      dataSource: chartData,color: const Color(0xff000000),//Color.fromrGBO(237,221,76,1),name: 'Today',xValueMapper: (ChartSampleData sales,_) => sales.xValue,yValueMapper: (ChartSampleData sales,_) => sales.secondSeriesYValue),///second series named "India".
  ColumnSeries<ChartSampleData,color: const Color(0XFF808080).withOpacity(0.5),//Color.fromrGBO(2,109,213,_) => sales.yValue,name: 'PrevIoUs Week'),];
}

解决方法

正如@rickimaru 指出的，您必须在 dateFormat 构造函数中设置 DateTimeAxis 参数。

查看 DateFormat 文档，DateFormat.jm() 构造函数似乎可以满足您的需求。

  primaryXAxis: DateTimeAxis(
    minimum: DateTime.now(),intervalType: DateTimeIntervalType.hours,desiredIntervals: 2,interval: 2,maximum: DateTime.now().add(
      Duration(hours: 12,minutes: 59,seconds: 59),),// sets the date format to 12 hour
    dateFormat: DateFormat.jm(),)
androidandroiddartiosiosmobile-application