Flutter Syncfusion Chart - DataLabel 以垂直形式出现

Question

我想在图表上显示最高价和最低价。我正在使用 syncfusion(https://pub.dev/packages/syncfusion_flutter_charts) 的 flutter 图表库和 DataLabelSettings 的构建器属性，但有时值以垂直形式出现，我无法理解为什么会这样。下面是我正在使用的代码。

DataLabelSettings(
        isVisible: true,
        alignment: ChartAlignment.far,
        showZeroValue: false,
        builder: (dynamic data, dynamic point, dynamic series, int pointIndex,
            int seriesIndex) {
          double max = widget.pricesData
              ?.reduce((value, element) => value > element ? value : element);

          double min = widget.pricesData
              ?.reduce((value, element) => value < element ? value : element);

          print('max chart: ${max.toString()}');
          print('min chart: ${min.toString()}');
          if (data['value'] == max) {
            return Text(
              data['value'].toString(),
              overflow: TextOverflow.clip,
              style: TextStyle(
                fontSize: 10.0,
                fontWeight: FontWeight.bold,
              ),
            );
          } else if (data['value'] == min) {
            return Text(
              data['value'].toString(),
              style: TextStyle(fontSize: 10.0, fontWeight: FontWeight.bold),
            );
          }

          return null;
        });

SfCartesianChart(
                plotAreaBorderWidth: 0,
                enableAxisAnimation: true,

                zoomPanBehavior: ZoomPanBehavior(enablePanning: true),
                // Initialize category axis
                primaryXAxis: NumericAxis(
                  isVisible: false,
                  //labelFormat: '{value}kk'.toString().substring(2),
                ),
                primaryYAxis: NumericAxis(
                  isVisible: false,
                ),
                //tooltipBehavior: customTooltipBehavior(),
                trackballBehavior: _trackballBehavior,
                //legend: _buildLegend(),
                series: <LineSeries<Map, dynamic>>[
          LineSeries<Map, dynamic>(
              // Bind data source
              dataSource: widget.chartData,
              dataLabelSettings: _buildDataLabelSetting(),
              xValueMapper: (Map chartData, _) => chartData['time'],
              yValueMapper: (Map chartData, _) => chartData['value'])
        ])

这是图表的屏幕截图。如果我们可以直接选择显示低值和高值，那就太好了。

Answer 1

来自 Syncfusion 的问候。我们已经分析了您的查询，我们想分享您的以下更改后的代码片段。对于模板，必须在示例中给出小部件的宽度和高度以避免此问题。默认情况下，如果模板小部件呈现在绘图区域之外，那么它会隐藏该模板，因此在不提供模板大小的情况下将显示数据标签模板，就像这样是垂直形式。请使用以下代码片段来避免此问题。

DataLabelSettings(
    isVisible: true,
    alignment: ChartAlignment.far,
    showZeroValue: false,
    builder: (dynamic data, dynamic point, dynamic series, int pointIndex,
        int seriesIndex) {
      double max = widget.pricesData
          ?.reduce((value, element) => value > element ? value : element);

      double min = widget.pricesData
          ?.reduce((value, element) => value < element ? value : element);

      print('max chart: ${max.toString()}');
      print('min chart: ${min.toString()}');
      if (data['value'] == max) {
      // Given width and height for the container
      return Container(
          width: 30,
          height: 30,
          child:Text(
          data['value'].toString(),
          overflow: TextOverflow.clip,
          style: TextStyle(
            fontSize: 10.0,
            fontWeight: FontWeight.bold,
          ),
         ),
        );
      } else if (data['value'] == min) {
      // Given width and height for the container
      return Container(
          width: 30,
          height: 30,
          child:Text(
          data['value'].toString(),
          style: TextStyle(fontSize: 10.0, fontWeight: FontWeight.bold),
        ), 
       );
      }

      return null;
    });

如果您需要进一步的帮助，请回复我们。

谢谢，达拉尼塔兰。 P

Flutter Syncfusion Chart - DataLabel 以垂直形式出现

Flutter Syncfusion Chart - DataLabel is appearing in vertical form

charts

syncfusion

vertical-alignment

flutter