Charts_flutter：如何使用 Flutter 图表做一个重叠 y 轴 label 的折线图？

Question

谁能帮我解决这个问题？ 我正在使用charts_flutter 库，希望图表与y 轴label 重叠。

库： https://pub.dev/packages/charts_flutter

我想要这样的结果：

这是我的代码：

TimeSeriesChart(
      seriesList,

      dateTimeFactory: const LocalDateTimeFactory(),
      animate: animate,
      domainAxis: DateTimeAxisSpec(
        renderSpec: GridlineRendererSpec(
            labelStyle: new TextStyleSpec(
                fontSize: MyDimens.chart_text_size, //
                color: labelColor),
            lineStyle: LineStyleSpec(
                thickness: 0, color: MaterialPalette.transparent)),
      ),
      primaryMeasureAxis: new NumericAxisSpec(
          tickFormatterSpec: simpleCurrencyFormatter,
          tickProviderSpec: new BasicNumericTickProviderSpec(
            zeroBound: false,
            dataIsInWholeNumbers: false,
            desiredTickCount: MyDimens.chart_desired_tick_count,
          ),
          renderSpec: new GridlineRendererSpec(
            // Tick and Label styling here.
            labelStyle: new TextStyleSpec(
                fontSize: MyDimens.chart_text_size, //
                color: labelColor),

            // Change the line colors to match text color.
            lineStyle: new LineStyleSpec(color: lineColor),
            labelAnchor: TickLabelAnchor.after,
            labelJustification: TickLabelJustification.inside,
          )),
    )

Answer 1

将zeroBound参数设置为true

Answer 2

只需在 renderSpec 中为 labelOffsetFromAxisPx 设置一个负数，如下所示：

labelOffsetFromAxisPx = -15

要获得更好的结果，请将 labelJustification 更改为TickLabelJustification.outside

最后将您的代码更改为：

primaryMeasureAxis: new NumericAxisSpec(
      tickFormatterSpec: simpleCurrencyFormatter,
      tickProviderSpec: new BasicNumericTickProviderSpec(
        zeroBound: false,
        dataIsInWholeNumbers: false,
        desiredTickCount: MyDimens.chart_desired_tick_count,
      ),
      renderSpec: new GridlineRendererSpec(
        // Tick and Label styling here.
        labelStyle: new TextStyleSpec(
            fontSize: MyDimens.chart_text_size, //
            color: labelColor),

        // Change the line colors to match text color.
        lineStyle: new LineStyleSpec(color: lineColor),
        labelAnchor: TickLabelAnchor.after,
        labelJustification: TickLabelJustification.outside,

        // Add offset herer
        labelOffsetFromAxisPx: -15,
      )),