如何根据 12 小时格式在 x 轴上以 2:00 小时为间隔绘制小时数？（同步融合颤振图表）答案

【问题标题】：How can i Plot Hours on x-axis with the interval of 2:00 hrs, Based on 12- hour Format? (Syncfusion Flutter Charts)如何根据 12 小时格式在 x 轴上以 2:00 小时为间隔绘制小时数？（同步融合颤振图表）
【发布时间】：2021-05-11 12:52:25
【问题描述】：

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

我希望我的 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, currentMonth, currentDay, getHour(4)),
      yValue: 250,
      secondSeriesYValue: 242),
  ChartSampleData(
      xValue: DateTime(currentYear, currentMonth, currentDay, getHour(8)),
      yValue: 281,
      secondSeriesYValue: 313),
  ChartSampleData(
      xValue: DateTime(currentYear, currentMonth, currentDay, getHour(12)),
      yValue: 358,
      secondSeriesYValue: 359),
  ChartSampleData(
      xValue: DateTime(currentYear, currentMonth, currentDay, 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, DateTime>(
      dataSource: chartData,
      color: const Color(0XFF808080).withOpacity(0.5),
      //Color.fromRGBO(2, 109, 213, 1),
      xValueMapper: (ChartSampleData sales, _) => sales.xValue,
      yValueMapper: (ChartSampleData sales, _) => sales.yValue,
      name: 'Previous Week'),
];
}

【问题讨论】：

您是否尝试在DateTimeAxis 中设置dateFormat？ api.flutter.dev/flutter/intl/DateFormat-class.html

标签： android ios flutter dart mobile-application

【解决方案1】：

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

查看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(),
  )

【讨论】：