customize x and y axis' colors separately
This commit is contained in:
parent
bf8c339b86
commit
ed7a9487ef
@ -76,6 +76,7 @@ class _MyHomePageState extends State<MyHomePage> {
|
|||||||
child: RealTimeGraph(
|
child: RealTimeGraph(
|
||||||
stream: stream.map((value) => value - 150),
|
stream: stream.map((value) => value - 150),
|
||||||
supportNegativeValuesDisplay: true,
|
supportNegativeValuesDisplay: true,
|
||||||
|
xAxisColor: Colors.black12,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@ -89,6 +90,7 @@ class _MyHomePageState extends State<MyHomePage> {
|
|||||||
stream: stream.map((value) => value - 150),
|
stream: stream.map((value) => value - 150),
|
||||||
supportNegativeValuesDisplay: true,
|
supportNegativeValuesDisplay: true,
|
||||||
displayMode: ChartDisplay.points,
|
displayMode: ChartDisplay.points,
|
||||||
|
xAxisColor: Colors.black12,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
@ -9,10 +9,12 @@ import 'point.dart';
|
|||||||
class RealTimeGraph extends StatefulWidget {
|
class RealTimeGraph extends StatefulWidget {
|
||||||
const RealTimeGraph({
|
const RealTimeGraph({
|
||||||
this.updateDelay = const Duration(milliseconds: 50),
|
this.updateDelay = const Duration(milliseconds: 50),
|
||||||
|
this.supportNegativeValuesDisplay = false,
|
||||||
this.displayMode = ChartDisplay.line,
|
this.displayMode = ChartDisplay.line,
|
||||||
this.displayYAxisValues = true,
|
this.displayYAxisValues = true,
|
||||||
this.displayYAxisLines = true,
|
this.displayYAxisLines = true,
|
||||||
this.axisColor = Colors.black87,
|
this.xAxisColor = Colors.black87,
|
||||||
|
this.yAxisColor = Colors.black87,
|
||||||
this.graphColor = Colors.black45,
|
this.graphColor = Colors.black45,
|
||||||
this.pointsSpacing = 3.0,
|
this.pointsSpacing = 3.0,
|
||||||
this.graphStroke = 1,
|
this.graphStroke = 1,
|
||||||
@ -22,7 +24,7 @@ class RealTimeGraph extends StatefulWidget {
|
|||||||
this.minValue = 0,
|
this.minValue = 0,
|
||||||
this.speed = 1,
|
this.speed = 1,
|
||||||
Key? key,
|
Key? key,
|
||||||
this.supportNegativeValuesDisplay = false,
|
|
||||||
}) : super(key: key);
|
}) : super(key: key);
|
||||||
|
|
||||||
// Callback to build custom Y-axis text.
|
// Callback to build custom Y-axis text.
|
||||||
@ -59,8 +61,11 @@ class RealTimeGraph extends StatefulWidget {
|
|||||||
// The color of the graph.
|
// The color of the graph.
|
||||||
final Color graphColor;
|
final Color graphColor;
|
||||||
|
|
||||||
|
// The color of the X-axis line.
|
||||||
|
final Color xAxisColor;
|
||||||
|
|
||||||
// The color of the Y-axis line.
|
// The color of the Y-axis line.
|
||||||
final Color axisColor;
|
final Color yAxisColor;
|
||||||
|
|
||||||
// The minimum value of the Y-axis.
|
// The minimum value of the Y-axis.
|
||||||
final double minValue;
|
final double minValue;
|
||||||
@ -177,7 +182,7 @@ class RealTimeGraphState extends State<RealTimeGraph>
|
|||||||
// Display the y-axis line
|
// Display the y-axis line
|
||||||
if (widget.displayYAxisLines)
|
if (widget.displayYAxisLines)
|
||||||
Container(
|
Container(
|
||||||
color: widget.axisColor,
|
color: widget.yAxisColor,
|
||||||
width: widget.axisStroke,
|
width: widget.axisStroke,
|
||||||
height: double.maxFinite,
|
height: double.maxFinite,
|
||||||
),
|
),
|
||||||
@ -235,7 +240,7 @@ class RealTimeGraphState extends State<RealTimeGraph>
|
|||||||
? Alignment.center
|
? Alignment.center
|
||||||
: Alignment.bottomCenter,
|
: Alignment.bottomCenter,
|
||||||
child: Container(
|
child: Container(
|
||||||
color: widget.axisColor,
|
color: widget.xAxisColor,
|
||||||
height: widget.axisStroke,
|
height: widget.axisStroke,
|
||||||
width: double.maxFinite,
|
width: double.maxFinite,
|
||||||
),
|
),
|
||||||
|
Loading…
x
Reference in New Issue
Block a user