Hello guys,
When i add more than 12 elements to a line_area graphic, the grid lines are not being displayed.
Only 8 are being shown, and the other ones are blank.
i'll attach a simple code, so you can replicate the error:
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:graphic/graphic.dart';
import 'package:intl/intl.dart';
import '../data.dart';
final _monthDayFormat = DateFormat('MM-dd');
class LineAreaPage extends StatelessWidget {
LineAreaPage({Key? key}) : super(key: key);
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: const Text('Line and Area Element'),
),
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Center(
child: Column(
children: <Widget>[
Container(
child: const Text(
'Spider Net Chart',
style: TextStyle(fontSize: 20),
),
padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
),
Container(
child: const Text(
'- A loop connects the first and last point.',
),
padding: const EdgeInsets.fromLTRB(10, 5, 10, 0),
alignment: Alignment.centerLeft,
),
Container(
margin: const EdgeInsets.only(top: 10),
width: 350,
height: 300,
child: Chart(
data: adjustData,
variables: {
'index': Variable(
accessor: (Map map) => map['index'].toString(),
),
'type': Variable(
accessor: (Map map) => map['type'] as String,
),
'value': Variable(
accessor: (Map map) => map['value'] as num,
),
},
elements: [
LineElement(
position:
Varset('index') * Varset('value') / Varset('type'),
shape: ShapeAttr(value: BasicLineShape(loop: true)),
color: ColorAttr(
variable: 'type', values: Defaults.colors10),
)
],
coord: PolarCoord(),
axes: [
Defaults.circularAxis,
Defaults.radialAxis,
],
selections: {
'touchMove': PointSelection(
on: {
GestureType.scaleUpdate,
GestureType.tapDown,
GestureType.longPressMoveUpdate
},
dim: 1,
variable: 'index',
)
},
tooltip: TooltipGuide(
anchor: (_) => Offset.zero,
align: Alignment.bottomRight,
multiTuples: true,
variables: ['type', 'value'],
),
crosshair: CrosshairGuide(followPointer: [false, true]),
),
),
],
),
),
),
);
}
}
For this example we are using static data:
const adjustData = [
{"type": "Email", "index": 1, "value": 120},
{"type": "Email", "index": 2, "value": 220},
{"type": "Email", "index": 3, "value": 150},
{"type": "Email", "index": 4, "value": 320},
{"type": "Email", "index": 5, "value": 320},
{"type": "Email", "index": 6, "value": 420},
{"type": "Email", "index": 7, "value": 520},
{"type": "Email", "index": 8, "value": 620},
{"type": "Email", "index": 9, "value": 720},
{"type": "Email", "index": 10, "value": 820},
{"type": "Email", "index": 11, "value": 120},
{"type": "Email", "index": 12, "value": 220},
{"type": "Email", "index": 13, "value": 320},
];
Thank you so much in advance,
Yosue