diff --git a/example/lib/bar_chart/samples/bar_chart_sample5.dart b/example/lib/bar_chart/samples/bar_chart_sample5.dart index 806cb1f4c..107a29303 100644 --- a/example/lib/bar_chart/samples/bar_chart_sample5.dart +++ b/example/lib/bar_chart/samples/bar_chart_sample5.dart @@ -41,6 +41,7 @@ class BarChartSample5State extends State { showTitles: true, textStyle: TextStyle(color: Colors.white, fontSize: 10), margin: 10, + rotateAngle: 180, getTitles: (double value) { switch (value.toInt()) { case 0: @@ -65,6 +66,21 @@ class BarChartSample5State extends State { leftTitles: SideTitles( showTitles: true, textStyle: TextStyle(color: Colors.white, fontSize: 10), + rotateAngle: 45, + getTitles: (double value) { + if (value == 0) { + return ''; + } + return '${value.toInt()}0k'; + }, + interval: 5, + margin: 8, + reservedSize: 30, + ), + rightTitles: SideTitles( + showTitles: true, + textStyle: TextStyle(color: Colors.white, fontSize: 10), + rotateAngle: 90, getTitles: (double value) { if (value == 0) { return ''; diff --git a/lib/src/chart/bar_chart/bar_chart_painter.dart b/lib/src/chart/bar_chart/bar_chart_painter.dart index 14ea3c02d..e2f726c90 100644 --- a/lib/src/chart/bar_chart/bar_chart_painter.dart +++ b/lib/src/chart/bar_chart/bar_chart_painter.dart @@ -5,6 +5,8 @@ import 'package:fl_chart/src/chart/base/base_chart/base_chart_painter.dart'; import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; +import '../../utils/utils.dart'; + class BarChartPainter extends AxisChartPainter with TouchHandler { Paint barPaint, bgTouchTooltipPaint; Paint clearPaint; @@ -288,7 +290,13 @@ class BarChartPainter extends AxisChartPainter with TouchHandler with TouchHandler with TouchHandler with TouchHandler { @@ -579,7 +580,13 @@ class LineChartPainter extends AxisChartPainter with TouchHandler tp.layout(maxWidth: getExtraNeededHorizontalSpace()); x -= tp.width + leftTitles.margin; y -= tp.height / 2; + canvas.save(); + canvas.translate(x + tp.width / 2, y + tp.height / 2); + canvas.rotate(radians(leftTitles.rotateAngle)); + canvas.translate(-(x + tp.width / 2), -(y + tp.height / 2)); + y -= translateRotatedPosition(tp.width, leftTitles.rotateAngle); tp.paint(canvas, Offset(x, y)); + canvas.restore(); verticalSeek += leftTitles.interval; } @@ -602,8 +609,13 @@ class LineChartPainter extends AxisChartPainter with TouchHandler x -= tp.width / 2; y -= topTitles.margin + tp.height; - + canvas.save(); + canvas.translate(x + tp.width / 2, y + tp.height / 2); + canvas.rotate(radians(topTitles.rotateAngle)); + canvas.translate(-(x + tp.width / 2), -(y + tp.height / 2)); + x -= translateRotatedPosition(tp.width, topTitles.rotateAngle); tp.paint(canvas, Offset(x, y)); + canvas.restore(); horizontalSeek += topTitles.interval; } @@ -623,9 +635,16 @@ class LineChartPainter extends AxisChartPainter with TouchHandler final TextPainter tp = TextPainter(text: span, textAlign: TextAlign.center, textDirection: TextDirection.ltr); tp.layout(maxWidth: getExtraNeededHorizontalSpace()); + x += rightTitles.margin; y -= tp.height / 2; + canvas.save(); + canvas.translate(x + tp.width / 2, y + tp.height / 2); + canvas.rotate(radians(rightTitles.rotateAngle)); + canvas.translate(-(x + tp.width / 2), -(y + tp.height / 2)); + y += translateRotatedPosition(tp.width, leftTitles.rotateAngle); tp.paint(canvas, Offset(x, y)); + canvas.restore(); verticalSeek += rightTitles.interval; } @@ -638,9 +657,7 @@ class LineChartPainter extends AxisChartPainter with TouchHandler while (horizontalSeek <= data.maxX) { double x = getPixelX(horizontalSeek, viewSize); double y = viewSize.height + getTopOffsetDrawSize(); - final String text = bottomTitles.getTitles(horizontalSeek); - final TextSpan span = TextSpan(style: bottomTitles.textStyle, text: text); final TextPainter tp = TextPainter(text: span, textAlign: TextAlign.center, textDirection: TextDirection.ltr); @@ -648,8 +665,13 @@ class LineChartPainter extends AxisChartPainter with TouchHandler x -= tp.width / 2; y += bottomTitles.margin; - + canvas.save(); + canvas.translate(x + tp.width / 2, y + tp.height / 2); + canvas.rotate(radians(bottomTitles.rotateAngle)); + canvas.translate(-(x + tp.width / 2), -(y + tp.height / 2)); + x += translateRotatedPosition(tp.width, bottomTitles.rotateAngle); tp.paint(canvas, Offset(x, y)); + canvas.restore(); horizontalSeek += bottomTitles.interval; } diff --git a/lib/src/chart/scatter_chart/scatter_chart_painter.dart b/lib/src/chart/scatter_chart/scatter_chart_painter.dart index bdaf892d0..3283f81dd 100644 --- a/lib/src/chart/scatter_chart/scatter_chart_painter.dart +++ b/lib/src/chart/scatter_chart/scatter_chart_painter.dart @@ -5,6 +5,7 @@ import 'package:fl_chart/src/chart/base/base_chart/touch_input.dart'; import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; +import '../../utils/utils.dart'; import 'scatter_chart_data.dart'; class ScatterChartPainter extends AxisChartPainter with TouchHandler { @@ -66,7 +67,13 @@ class ScatterChartPainter extends AxisChartPainter with TouchH tp.layout(maxWidth: getExtraNeededHorizontalSpace()); x -= tp.width + leftTitles.margin; y -= tp.height / 2; + canvas.save(); + canvas.translate(x + tp.width / 2, y + tp.height / 2); + canvas.rotate(radians(leftTitles.rotateAngle)); + canvas.translate(-(x + tp.width / 2), -(y + tp.height / 2)); + y -= translateRotatedPosition(tp.width, leftTitles.rotateAngle); tp.paint(canvas, Offset(x, y)); + canvas.restore(); verticalSeek += leftTitles.interval; } @@ -89,8 +96,13 @@ class ScatterChartPainter extends AxisChartPainter with TouchH x -= tp.width / 2; y -= topTitles.margin + tp.height; - + canvas.save(); + canvas.translate(x + tp.width / 2, y + tp.height / 2); + canvas.rotate(radians(topTitles.rotateAngle)); + canvas.translate(-(x + tp.width / 2), -(y + tp.height / 2)); + x -= translateRotatedPosition(tp.width, topTitles.rotateAngle); tp.paint(canvas, Offset(x, y)); + canvas.restore(); horizontalSeek += topTitles.interval; } @@ -110,9 +122,16 @@ class ScatterChartPainter extends AxisChartPainter with TouchH final TextPainter tp = TextPainter(text: span, textAlign: TextAlign.center, textDirection: TextDirection.ltr); tp.layout(maxWidth: getExtraNeededHorizontalSpace()); + x += rightTitles.margin; y -= tp.height / 2; + canvas.save(); + canvas.translate(x + tp.width / 2, y + tp.height / 2); + canvas.rotate(radians(rightTitles.rotateAngle)); + canvas.translate(-(x + tp.width / 2), -(y + tp.height / 2)); + y += translateRotatedPosition(tp.width, leftTitles.rotateAngle); tp.paint(canvas, Offset(x, y)); + canvas.restore(); verticalSeek += rightTitles.interval; } @@ -135,8 +154,13 @@ class ScatterChartPainter extends AxisChartPainter with TouchH x -= tp.width / 2; y += bottomTitles.margin; - + canvas.save(); + canvas.translate(x + tp.width / 2, y + tp.height / 2); + canvas.rotate(radians(bottomTitles.rotateAngle)); + canvas.translate(-(x + tp.width / 2), -(y + tp.height / 2)); + x += translateRotatedPosition(tp.width, bottomTitles.rotateAngle); tp.paint(canvas, Offset(x, y)); + canvas.restore(); horizontalSeek += bottomTitles.interval; } diff --git a/lib/src/utils/utils.dart b/lib/src/utils/utils.dart index ca9d113b1..4475b7ddc 100644 --- a/lib/src/utils/utils.dart +++ b/lib/src/utils/utils.dart @@ -22,3 +22,8 @@ Size getDefaultSize(BuildContext context) { size *= 0.7; return size; } + +/// forward the view base on its degree +double translateRotatedPosition(double size, double degree) { + return (size / 4) * math.sin(radians(degree.abs())); +} diff --git a/repo_files/documentations/base_chart.md b/repo_files/documentations/base_chart.md index 883907923..fc3f7ef03 100644 --- a/repo_files/documentations/base_chart.md +++ b/repo_files/documentations/base_chart.md @@ -29,8 +29,8 @@ |reservedSize| a reserved space to show titles|22| |textStyle| [TextStyle](https://api.flutter.dev/flutter/painting/TextStyle-class.html) to determine the style of texts |TextStyle(color: Colors.black, fontSize: 11)| |margin| margin of horizontal the titles | 6| -|interval| interval between of showing titles in this side, | 1.0 | - +|interval| interval between of showing titles in this side | 1.0 | +|rotateAngle| the clockwise angle of rotating title in degree | 0.0 | diff --git a/repo_files/images/bar_chart/bar_chart_sample_5.png b/repo_files/images/bar_chart/bar_chart_sample_5.png index 63caf2c9b..80ad06dc9 100644 Binary files a/repo_files/images/bar_chart/bar_chart_sample_5.png and b/repo_files/images/bar_chart/bar_chart_sample_5.png differ