chart_flutter：如何使用 Flutter Chart 做折线图重叠 y 轴标签？答案

【问题标题】：charts_flutter: how to do a line chart overlapping y-axis label using Flutter Chart?chart_flutter：如何使用 Flutter Chart 做折线图重叠 y 轴标签？
【发布时间】：2020-12-08 04:53:10
【问题描述】：

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

图书馆：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,
          )),
    )

【问题讨论】：

我已经更新了我的问题。如果这个问题不清楚，请告诉我。谢谢！

标签： flutter charts flutter-dependencies

【解决方案1】：

将zeroBound参数设置为true

【讨论】：

【解决方案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,
      )),

【讨论】：