【Flutter】graphic图表实现自定义tooltip
renderer
graphic中tooltip的TooltipGuide类提供了renderer方法，接收三个参数Size类型，Offset类型，Map<int, Tuple>类型。可查到的文档是真的少，所以只能在源码中扒拉例子，做符合需求的修改。
官方github示例
官方示例
这个例子感觉像是tooltip和提供的那些属性的源码实现，然后改变了背景颜色等，但如果实现想echarts那样对每条线的数据前增加颜色块区分，还是要自己摸索。先看一下这个例子都做了什么吧
List<MarkElement> simpleTooltip(Size size,Offset anchor,Map<int, Tuple> selectedTuples,) {// 返回的元素列表List<MarkElement> elements;// 生成tooltip内容String textContent = '';// 选中的数据 ({date: xxx, name: 线条1, points: xxx}, {date: xx, name: 线条2, points: xx}...)final selectedTupleList = selectedTuples.values;// 选中的数据的字段名列表// 单条线：[date, points]// 多条线：会通过name区分不同线的数值[date, name, points]final fields = selectedTupleList.first.keys.toList();// 如果只有一条线if (selectedTuples.length == 1) {// 取出选中的数据final original = selectedTupleList.single;// 取出第一个字段的值var field = fields.first;// 将第一个字段的值放入到tooltip的第一行/*** 此时的数据结构是：* date: 2023-11-24*/textContent += '$field: ${original[field]}';// 遍历字段名列表for (var i = 1; i < fields.length; i++) {// 取出第i个字段field = fields[i];// 将第i个字段的值放入到tooltip的第二行/*** 遍历后的数据结构是：* date: 2023-11-24* points: 123*/textContent += '\n$field: ${original[field]}';}} else {// 如果有多条线// 遍历选中的数据（几条线几条数据），将每个数据的第二个字段和第三个字段的值放入到tooltip的第二行和第三行for (var original in selectedTupleList) {// 取出第一个字段final domainField = fields.first;// 取出最后一个字段final measureField = fields.last;/*** 遍历结束后的数据结构是：* 2023-11-24：线条1* 2023-11-24：线条2* ....*/textContent += '\n${original[domainField]}: ${original[measureField]}';}}// 提出一些变量const textStyle = TextStyle(fontSize: 12, color: Colors.white);const padding = EdgeInsets.all(5);const align = Alignment.topRight;const offset = Offset(5, -5);const elevation = 1.0;const backgroundColor = Colors.black;final painter = TextPainter(text: TextSpan(text: textContent, style: textStyle),textDirection: TextDirection.ltr,);painter.layout();// 计算tooltip的宽高final width = padding.left + painter.width + padding.right;final height = padding.top + painter.height + padding.bottom;// 调整tooltip弹框（包含内容）的位置final paintPoint = getBlockPaintPoint(anchor + offset,width,height,align,);// 调整tooltip弹框（不包含内容）的位置final window = Rect.fromLTWH(paintPoint.dx,paintPoint.dy,width,height,);// 计算tooltip文本的位置var textPaintPoint = paintPoint + padding.topLeft;elements = <MarkElement>[RectElement(rect: window,style: PaintStyle(fillColor: backgroundColor, elevation: elevation)),LabelElement(text: textContent,anchor: textPaintPoint,style:LabelStyle(textStyle: textStyle, align: Alignment.bottomRight)),];return elements;}
效果
根据需求调整
改动后代码
List<MarkElement> simpleTooltip(Size size,Offset anchor,Map<int, Tuple> selectedTuples,) {// 返回的元素列表List<MarkElement> elements;// 标识元素列表List<MarkElement> tagElements = [];// 生成tooltip内容String textContent = '';// 选中的数据 ({date: xxx, name: 线条1, points: xxx}, {date: xx, name: 线条2, points: xx}...)final selectedTupleList = selectedTuples.values;// 选中的数据的字段名列表 [date, name, points]final fields = selectedTupleList.first.keys.toList();// 选中的数据的第一个数据的第一个字段的值，放入到tooltip的第一行/*** 目前的数据结构是：* 2023-11-24*/textContent = '${selectedTupleList.first[fields.first]}';// 遍历选中的数据（几条线几条数据），将每个数据的第二个字段和第三个字段的值放入到tooltip的第二行和第三行for (var original in selectedTupleList) {final domainField = fields[1];final measureField = fields.last;/*** 遍历结束后的数据结构是：* 2023-11-24* 线条1: 123* 线条2: 456* ....*/textContent += '\n ${original[domainField]}: ${original[measureField]}';}// 提出一些变量const textStyle = TextStyle(fontSize: 12, color: Colors.black, height: 2);const padding = EdgeInsets.all(5);const align = Alignment.topRight;const offset = Offset(5, -5);const elevation = 1.0;const backgroundColor = Colors.white;final painter = TextPainter(text: TextSpan(text: textContent, style: textStyle),textDirection: ui.TextDirection.ltr,);painter.layout();// tooltip的宽高final width = padding.left + painter.width + padding.right;final height = padding.top + painter.height + padding.bottom;// tooltip的位置// 大概根据中间的数据判断算了下位置,避免一直在左或右,边界超出屏幕final move = anchor < const Offset(250, 90)? anchor + offset - const Offset(-10, -40): anchor + Offset(-width - 20, 40);final paintPoint = getBlockPaintPoint(move,width,height,align,);final window = Rect.fromLTWH(paintPoint.dx - 10, //横向位置paintPoint.dy,width + 20,height,);var textPaintPoint = paintPoint + padding.topLeft;// 生成tooltip线条前的标识元素for (int i = 0; i < selectedTupleList.length; i++) {tagElements.add(LabelElement(text: '●',anchor: textPaintPoint + padding.topLeft + Offset(-15, 26 + i * 23),style: LabelStyle(textStyle: TextStyle(color: Defaults.colors10[i],fontWeight: FontWeight.w900,fontSize: 12),align: Alignment.bottomRight)),);}elements = <MarkElement>[RectElement(rect: window,style: PaintStyle(fillColor: backgroundColor, elevation: elevation)),...tagElements,LabelElement(text: textContent,anchor: textPaintPoint,style:LabelStyle(textStyle: textStyle, align: Alignment.bottomRight)),];return elements;}
效果
整体代码
// linePage.dart
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:graphic/graphic.dart';
import 'dart:ui' as ui;
import './components/static/data.dart';class linePage extends StatelessWidget {linePage({super.key});final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();List<MarkElement> simpleTooltip(Size size,Offset anchor,Map<int, Tuple> selectedTuples,) {// 返回的元素列表List<MarkElement> elements;// 标识元素列表List<MarkElement> tagElements = [];// 生成tooltip内容String textContent = '';// 选中的数据 ({date: xxx, name: 线条1, points: xxx}, {date: xx, name: 线条2, points: xx}...)final selectedTupleList = selectedTuples.values;// 选中的数据的字段名列表 [date, name, points]final fields = selectedTupleList.first.keys.toList();// 选中的数据的第一个数据的第一个字段的值，放入到tooltip的第一行/*** 目前的数据结构是：* 2023-11-24*/textContent = '${selectedTupleList.first[fields.first]}';// 遍历选中的数据（几条线几条数据），将每个数据的第二个字段和第三个字段的值放入到tooltip的第二行和第三行for (var original in selectedTupleList) {final domainField = fields[1];final measureField = fields.last;/*** 遍历结束后的数据结构是：* 2023-11-24* 线条1: 123* 线条2: 456* ....*/textContent += '\n ${original[domainField]}: ${original[measureField]}';}// 提出一些变量const textStyle = TextStyle(fontSize: 12, color: Colors.black, height: 2);const padding = EdgeInsets.all(5);const align = Alignment.topRight;const offset = Offset(5, -5);const elevation = 1.0;const backgroundColor = Colors.white;final painter = TextPainter(text: TextSpan(text: textContent, style: textStyle),textDirection: ui.TextDirection.ltr,);painter.layout();// tooltip的宽高final width = padding.left + painter.width + padding.right;final height = padding.top + painter.height + padding.bottom;// tooltip的位置// 大概根据中间的数据判断算了下位置,避免一直在左或右,边界超出屏幕final move = anchor < const Offset(250, 90)? anchor + offset - const Offset(-10, -40): anchor + Offset(-width - 20, 40);final paintPoint = getBlockPaintPoint(move,width,height,align,);final window = Rect.fromLTWH(paintPoint.dx - 10, //横向位置paintPoint.dy,width + 20,height,);var textPaintPoint = paintPoint + padding.topLeft;// 生成tooltip线条前的标识元素for (int i = 0; i < selectedTupleList.length; i++) {tagElements.add(LabelElement(text: '●',anchor: textPaintPoint + padding.topLeft + Offset(-15, 26 + i * 23),style: LabelStyle(textStyle: TextStyle(color: Defaults.colors10[i],fontWeight: FontWeight.w900,fontSize: 12),align: Alignment.bottomRight)),);}elements = <MarkElement>[RectElement(rect: window,style: PaintStyle(fillColor: backgroundColor, elevation: elevation)),...tagElements,LabelElement(text: textContent,anchor: textPaintPoint,style:LabelStyle(textStyle: textStyle, align: Alignment.bottomRight)),];return elements;}@overrideWidget build(BuildContext context) {return SingleChildScrollView(child: Center(child: Column(children: <Widget>[Container(padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),child: const Text('Smooth Line and Area chart',style: TextStyle(fontSize: 20),),),Container(margin: const EdgeInsets.only(top: 10),width: 350,height: 300,child: Chart(// 数据源data: invalidData,// 变量配置variables: {'date': Variable(accessor: (Map map) => map['date'] as String,scale: OrdinalScale(tickCount: 5, // x轴刻度数量),),'name': Variable(accessor: (Map map) => map['name'] as String,),'points': Variable(accessor: (Map map) => (map['points'] ?? double.nan) as num,),},marks: [// 线条LineMark(// 如果单线条加name则必须有position属性配置，否则是一条直线position:Varset('date') * Varset('points') / Varset('name'),shape: ShapeEncode(value: BasicLineShape(smooth: true),),// 粗细size: SizeEncode(value: 1.5),),// 线条与X轴之间区域填充AreaMark(// 如果单线条加name则必须有position属性配置，否则不显示position:Varset('date') * Varset('points') / Varset('name'),shape: ShapeEncode(value:BasicAreaShape(smooth: true), // smooth: true 使线条变得平滑),color: ColorEncode(value: Colors.pink.withAlpha(80),),),],// 坐标轴配置axes: [Defaults.horizontalAxis,Defaults.verticalAxis,],selections: {'touchMove': PointSelection(on: {GestureType.scaleUpdate,GestureType.tapDown,GestureType.hover,GestureType.longPressMoveUpdate},dim: Dim.x,)},// 触摸弹框提示tooltip: TooltipGuide(// 跟随鼠标位置// followPointer: [false, true],// align: Alignment.topLeft, // 弹框对于点击位置的对齐方式// offset: const Offset(-20, -20), // 偏移量// 使用自定义需要注释上面的一些配置renderer: simpleTooltip,),// 十字准线crosshair: CrosshairGuide(followPointer: [false, true]),),),Container(padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),child: const Text('Group interactions',style: TextStyle(fontSize: 20),),),Container(margin: const EdgeInsets.only(top: 10),width: 350,height: 300,child: Chart(data: invalidData1,variables: {'date': Variable(accessor: (Map map) => map['date'] as String,scale: OrdinalScale(tickCount: 5, inflate: true),),'name': Variable(accessor: (Map map) => map['name'] as String,),'points': Variable(accessor: (Map map) => (map['points'] ?? double.nan) as num,),},coord: RectCoord(horizontalRange: [0.1, 0.99]),marks: [LineMark(position:Varset('date') * Varset('points') / Varset('name'),shape: ShapeEncode(value: BasicLineShape(smooth: true)),size: SizeEncode(value: 1.5),color: ColorEncode(variable: 'name',values: Defaults.colors10,// updaters: {// 'groupMouse': {false: (color) => color.withAlpha(100)},// // 'groupTouch': {false: (color) => color.withAlpha(100)},// },),),// PointMark(// color: ColorEncode(// variable: 'name',// values: Defaults.colors10,// updaters: {// 'groupMouse': {false: (color) => color.withAlpha(100)},// 'groupTouch': {false: (color) => color.withAlpha(100)},// },// ),// ),],axes: [Defaults.horizontalAxis,Defaults.verticalAxis,],// // 提示框选项配置selections: {'666': PointSelection(on: {GestureType.hover, GestureType.tap},// 设备devices: {PointerDeviceKind.mouse},variable: 'date',),'groupMouse': PointSelection(on: {GestureType.hover,},// variable: 'name',devices: {PointerDeviceKind.mouse},),'tooltipTouch': PointSelection(on: {GestureType.scaleUpdate,GestureType.tapDown,GestureType.longPressMoveUpdate},// variable: 'name',devices: {PointerDeviceKind.touch},),},tooltip: TooltipGuide(selections: {'tooltipTouch', '666'},// multiTuples: true,// followPointer: [false, true],// align: Alignment.topLeft,// // mark: 0,// // 与上方selections中定义的variable相排斥// variables: [// // 'date',// 'name',// 'points',// ],renderer: simpleTooltip),crosshair: CrosshairGuide(selections: {'tooltipTouch', '666'},styles: [PaintStyle(strokeColor: const Color.fromARGB(255, 92, 68, 68)),PaintStyle(strokeColor: const Color.fromARGB(0, 158, 154, 154)),],followPointer: [false, true],),),),],),),);}
}
// data.dart
const invalidData1 = [{"date": "2016-01-04", "name": "线条1", "points": 126.12},{"date": "2016-01-05", "name": "线条1", "points": 125.688},{"date": "2016-01-06", "name": "线条1", "points": 119.704},{"date": "2016-01-07", "name": "线条1", "points": 120.19},{"date": "2016-01-08", "name": "线条1", "points": 121.157},{"date": "2016-01-11", "name": "线条1", "points": 117},{"date": "2016-01-12", "name": "线条1", "points": 120},{"date": "2016-01-13", "name": "线条1", "points": 122},{"date": "2016-01-14", "name": "线条1", "points": 117.76},{"date": "2016-01-15", "name": "线条1", "points": 114.397},{"date": "2016-01-18", "name": "线条1", "points": 116.373},{"date": "2016-01-19", "name": "线条1", "points": 120.547},{"date": "2016-01-20", "name": "线条1", "points": 113.733},{"date": "2016-01-21", "name": "线条1", "points": 114.098},{"date": "2016-01-22", "name": "线条1", "points": 123.833},{"date": "2016-01-25", "name": "线条1", "points": 125},{"date": "2016-01-26", "name": "线条1", "points": 124.866},{"date": "2016-01-27", "name": "线条1", "points": 120.264},{"date": "2016-01-28", "name": "线条1", "points": 122.296},{"date": "2016-01-29", "name": "线条1", "points": 124.502},{"date": "2016-02-01", "name": "线条1", "points": 127.936},{"date": "2016-02-02", "name": "线条1", "points": null},{"date": "2016-02-03", "name": "线条1", "points": 129.95},{"date": "2016-02-04", "name": "线条1", "points": 129.275},{"date": "2016-02-05", "name": "线条1", "points": 127.898},{"date": "2016-02-08", "name": "线条1", "points": 134.9},{"date": "2016-02-09", "name": "线条1", "points": 122.819},{"date": "2016-02-10", "name": "线条1", "points": 120.108},{"date": "2016-02-11", "name": "线条1", "points": 119.447},{"date": "2016-02-12", "name": "线条1", "points": 117.8},{"date": "2016-02-15", "name": "线条1", "points": null},{"date": "2016-02-16", "name": "线条1", "points": 121.865},{"date": "2016-02-17", "name": "线条1", "points": 126.3},{"date": "2016-02-18", "name": "线条1", "points": 128.259},{"date": "2016-02-19", "name": "线条1", "points": 125.724},{"date": "2016-02-22", "name": "线条1", "points": 130},{"date": "2016-02-23", "name": "线条1", "points": 129.948},{"date": "2016-02-24", "name": "线条1", "points": 132.5},{"date": "2016-02-25", "name": "线条1", "points": 128.08},{"date": "2016-02-26", "name": "线条1", "points": 122},{"date": "2016-02-29", "name": "线条1", "points": 122},{"date": "2016-03-01", "name": "线条1", "points": 123.449},{"date": "2016-03-02", "name": "线条1", "points": double.nan},{"date": "2016-03-03", "name": "线条1", "points": 132},{"date": "2016-03-04", "name": "线条1", "points": 135},{"date": "2016-03-07", "name": "线条1", "points": 123.905},{"date": "2016-03-08", "name": "线条1", "points": 125.155},{"date": "2016-03-09", "name": "线条1", "points": 126},{"date": "2016-03-10", "name": "线条1", "points": 126.778},{"date": "2016-03-11", "name": "线条1", "points": 129.656},{"date": "2016-03-14", "name": "线条1", "points": 127.64},{"date": "2016-03-15", "name": "线条1", "points": 124.786},{"date": "2016-03-16", "name": "线条1", "points": 124.469},{"date": "2016-03-17", "name": "线条1", "points": 123.5},{"date": "2016-03-18", "name": "线条1", "points": 124.061},{"date": "2016-03-21", "name": "线条1", "points": 123.5},{"date": "2016-03-22", "name": "线条1", "points": 129.002},{"date": "2016-03-23", "name": "线条1", "points": 129},{"date": "2016-03-24", "name": "线条1", "points": 131.31},{"date": "2016-03-29", "name": "线条1", "points": 133},{"date": "2016-03-30", "name": "线条1", "points": 129.298},{"date": "2016-03-31", "name": "线条1", "points": 127.4},{"date": "2016-04-01", "name": "线条1", "points": 122.376},{"date": "2016-04-04", "name": "线条1", "points": 119.467},{"date": "2016-04-05", "name": "线条1", "points": 120.695},{"date": "2016-04-06", "name": "线条1", "points": 118.725},{"date": "2016-04-07", "name": "线条1", "points": 127.539},{"date": "2016-04-08", "name": "线条1", "points": 129.8},{"date": "2016-04-11", "name": "线条1", "points": 129.5},{"date": "2016-04-12", "name": "线条1", "points": 134.465},{"date": "2016-04-13", "name": "线条1", "points": 133},{"date": "2016-04-14", "name": "线条1", "points": 137.35},{"date": "2016-04-15", "name": "线条1", "points": 137.2},{"date": "2016-04-18", "name": "线条1", "points": 132.611},{"date": "2016-04-19", "name": "线条1", "points": 135.479},{"date": "2016-04-20", "name": "线条1", "points": 139.05},{"date": "2016-04-21", "name": "线条1", "points": 142},{"date": "2016-04-22", "name": "线条1", "points": 135.761},{"date": "2016-04-25", "name": "线条1", "points": 136.174},{"date": "2016-04-26", "name": "线条1", "points": 134.782},{"date": "2016-04-27", "name": "线条1", "points": 128},{"date": "2016-04-28", "name": "线条1", "points": 121.5},{"date": "2016-04-29", "name": "线条1", "points": 120},{"date": "2016-05-02", "name": "线条1", "points": 123.966},{"date": "2016-05-03", "name": "线条1", "points": 122.538},{"date": "2016-05-04", "name": "线条1", "points": 120},{"date": "2016-05-05", "name": "线条1", "points": 120.21},{"date": "2016-05-06", "name": "线条1", "points": 121.01},{"date": "2016-05-09", "name": "线条1", "points": double.nan},{"date": "2016-05-10", "name": "线条1", "points": 120.622},{"date": "2016-05-11", "name": "线条1", "points": 123.85},{"date": "2016-05-12", "name": "线条1", "points": 122.963},{"date": "2016-05-13", "name": "线条1", "points": 126},{"date": "2016-05-17", "name": "线条1", "points": 130},{"date": "2016-05-18", "name": "线条1", "points": 128.845},{"date": "2016-05-19", "name": "线条1", "points": 130.17},{"date": "2016-05-20", "name": "线条1", "points": 129.741},{"date": "2016-05-23", "name": "线条1", "points": 129.668},{"date": "2016-05-24", "name": "线条1", "points": 126.886},{"date": "2016-05-25", "name": "线条1", "points": 128.239},{"date": "2016-05-26", "name": "线条1", "points": 127.239},{"date": "2016-05-27", "name": "线条1", "points": 127.457},{"date": "2016-05-30", "name": "线条1", "points": 127.37},{"date": "2016-05-31", "name": "线条1", "points": 130.756},{"date": "2016-06-01", "name": "线条1", "points": 133.232},{"date": "2016-06-02", "name": "线条1", "points": 126.47},{"date": "2016-06-03", "name": "线条1", "points": 126.385},{"date": "2016-06-06", "name": "线条1", "points": 128.331},{"date": "2016-06-07", "name": "线条1", "points": 130.914},{"date": "2016-06-08", "name": "线条1", "points": 133},{"date": "2016-06-09", "name": "线条1", "points": 133.041},{"date": "2016-06-10", "name": "线条1", "points": 133.041},{"date": "2016-06-13", "name": "线条1", "points": 129},{"date": "2016-06-14", "name": "线条1", "points": 129.166},{"date": "2016-06-15", "name": "线条1", "points": 124.687},{"date": "2016-06-16", "name": "线条1", "points": 122.77},{"date": "2016-06-17", "name": "线条1", "points": 126.461},{"date": "2016-06-20", "name": "线条1", "points": 127},{"date": "2016-06-21", "name": "线条1", "points": 125.594},{"date": "2016-06-22", "name": "线条1", "points": 127.438},{"date": "2016-06-23", "name": "线条1", "points": 124.44},{"date": "2016-06-24", "name": "线条1", "points": 122.131},{"date": "2016-06-27", "name": "线条1", "points": 120.53},{"date": "2016-06-28", "name": "线条1", "points": 120.296},{"date": "2016-06-29", "name": "线条1", "points": 125.877},{"date": "2016-06-30", "name": "线条1", "points": 126.404},{"date": "2016-01-04", "name": "线条2", "points": 130.914},{"date": "2016-01-05", "name": "线条2", "points": 133},{"date": "2016-01-06", "name": "线条2", "points": 159.704},{"date": "2016-01-07", "name": "线条2", "points": 133.19},{"date": "2016-01-08", "name": "线条2", "points": 202.157},{"date": "2016-01-11", "name": "线条2", "points": 128},{"date": "2016-01-12", "name": "线条2", "points": 138},{"date": "2016-01-13", "name": "线条2", "points": 152},{"date": "2016-01-14", "name": "线条2", "points": 157.76},{"date": "2016-01-15", "name": "线条2", "points": 134.397},{"date": "2016-01-18", "name": "线条2", "points": 170.373},{"date": "2016-01-19", "name": "线条2", "points": 140.547},{"date": "2016-01-20", "name": "线条2", "points": 133.733},{"date": "2016-01-21", "name": "线条2", "points": 124.098},{"date": "2016-01-22", "name": "线条2", "points": 113.833},{"date": "2016-01-25", "name": "线条2", "points": 125},{"date": "2016-01-26", "name": "线条2", "points": 154.866},{"date": "2016-01-27", "name": "线条2", "points": 130.264},{"date": "2016-01-28", "name": "线条2", "points": 142.296},{"date": "2016-01-29", "name": "线条2", "points": 114.502},{"date": "2016-02-01", "name": "线条2", "points": 137.936},{"date": "2016-02-02", "name": "线条2", "points": null},{"date": "2016-02-03", "name": "线条2", "points": 169.95},{"date": "2016-02-04", "name": "线条2", "points": 119.275},{"date": "2016-02-05", "name": "线条2", "points": 127.898},{"date": "2016-02-08", "name": "线条2", "points": 134.9},{"date": "2016-02-09", "name": "线条2", "points": 152.819},{"date": "2016-02-10", "name": "线条2", "points": 100.108},{"date": "2016-02-11", "name": "线条2", "points": 109.447},{"date": "2016-02-12", "name": "线条2", "points": 127.8},{"date": "2016-02-15", "name": "线条2", "points": null},{"date": "2016-02-22", "name": "线条2", "points": 120},{"date": "2016-02-23", "name": "线条2", "points": 149.948},{"date": "2016-02-24", "name": "线条2", "points": 102.5},{"date": "2016-03-03", "name": "线条2", "points": 142},{"date": "2016-03-04", "name": "线条2", "points": 165},{"date": "2016-03-07", "name": "线条2", "points": 173.905},{"date": "2016-03-08", "name": "线条2", "points": 128.155},{"date": "2016-02-25", "name": "线条2", "points": 118.08},{"date": "2016-04-04", "name": "线条2", "points": 149.467},{"date": "2016-04-05", "name": "线条2", "points": 130.695},{"date": "2016-04-06", "name": "线条2", "points": 128.725},{"date": "2016-04-07", "name": "线条2", "points": 137.539},{"date": "2016-04-08", "name": "线条2", "points": 135.8},{"date": "2016-04-11", "name": "线条2", "points": 138.5},{"date": "2016-04-12", "name": "线条2", "points": 124.465},{"date": "2016-04-13", "name": "线条2", "points": 143},{"date": "2016-04-14", "name": "线条2", "points": 134.35},{"date": "2016-04-15", "name": "线条2", "points": 127.2},{"date": "2016-04-18", "name": "线条2", "points": 112.611},{"date": "2016-04-19", "name": "线条2", "points": 135.479},{"date": "2016-02-26", "name": "线条2", "points": 142},{"date": "2016-02-29", "name": "线条2", "points": 132},{"date": "2016-03-01", "name": "线条2", "points": 113.449},{"date": "2016-03-02", "name": "线条2", "points": double.nan},{"date": "2016-02-16", "name": "线条2", "points": 131.865},{"date": "2016-02-17", "name": "线条2", "points": 156.3},{"date": "2016-02-18", "name": "线条2", "points": 148.259},{"date": "2016-02-19", "name": "线条2", "points": 135.724},{"date": "2016-03-09", "name": "线条2", "points": 116},{"date": "2016-03-10", "name": "线条2", "points": 176.778},{"date": "2016-03-11", "name": "线条2", "points": 139.656},{"date": "2016-03-14", "name": "线条2", "points": 157.64},{"date": "2016-03-15", "name": "线条2", "points": double.nan},{"date": "2016-03-16", "name": "线条2", "points": 144.469},{"date": "2016-03-17", "name": "线条2", "points": 133.5},{"date": "2016-03-18", "name": "线条2", "points": 184.061},{"date": "2016-03-21", "name": "线条2", "points": 163.5},{"date": "2016-03-22", "name": "线条2", "points": 159.002},{"date": "2016-03-23", "name": "线条2", "points": 149},{"date": "2016-03-24", "name": "线条2", "points": 111.31},{"date": "2016-03-29", "name": "线条2", "points": 123},{"date": "2016-03-30", "name": "线条2", "points": 139.298},{"date": "2016-03-31", "name": "线条2", "points": 147.4},{"date": "2016-04-01", "name": "线条2", "points": 132.376},{"date": "2016-04-20", "name": "线条2", "points": 149.05},{"date": "2016-04-21", "name": "线条2", "points": 162},{"date": "2016-04-22", "name": "线条2", "points": 155.761},{"date": "2016-04-25", "name": "线条2", "points": 126.174},{"date": "2016-04-26", "name": "线条2", "points": 134.782},{"date": "2016-04-27", "name": "线条2", "points": 118},{"date": "2016-04-28", "name": "线条2", "points": 141.5},{"date": "2016-05-31", "name": "线条2", "points": 130.756},{"date": "2016-06-01", "name": "线条2", "points": 143.232},{"date": "2016-06-02", "name": "线条2", "points": 176.47},{"date": "2016-06-03", "name": "线条2", "points": 156.385},{"date": "2016-06-06", "name": "线条2", "points": 168.331},{"date": "2016-06-07", "name": "线条2", "points": 130.914},{"date": "2016-06-08", "name": "线条2", "points": 123},{"date": "2016-06-09", "name": "线条2", "points": 133.041},{"date": "2016-06-10", "name": "线条2", "points": 133.041},{"date": "2016-06-13", "name": "线条2", "points": 129},{"date": "2016-06-14", "name": "线条2", "points": null},{"date": "2016-06-15", "name": "线条2", "points": 114.687},{"date": "2016-06-16", "name": "线条2", "points": 122.77},{"date": "2016-06-17", "name": "线条2", "points": 146.461},{"date": "2016-06-20", "name": "线条2", "points": 127},{"date": "2016-06-21", "name": "线条2", "points": 155.594},{"date": "2016-06-22", "name": "线条2", "points": 127.438},{"date": "2016-06-23", "name": "线条2", "points": 134.44},{"date": "2016-06-24", "name": "线条2", "points": 112.131},{"date": "2016-06-27", "name": "线条2", "points": 100.53},{"date": "2016-06-28", "name": "线条2", "points": 150.296},{"date": "2016-06-29", "name": "线条2", "points": 135.877},{"date": "2016-06-30", "name": "线条2", "points": 126.404},{"date": "2016-04-29", "name": "线条2", "points": 130},{"date": "2016-05-02", "name": "线条2", "points": 123.966},{"date": "2016-05-03", "name": "线条2", "points": 122.538},{"date": "2016-05-04", "name": "线条2", "points": 130},{"date": "2016-05-05", "name": "线条2", "points": 120.21},{"date": "2016-05-06", "name": "线条2", "points": 131.01},{"date": "2016-05-09", "name": "线条2", "points": double.nan},{"date": "2016-05-10", "name": "线条2", "points": 120.622},{"date": "2016-05-11", "name": "线条2", "points": 153.85},{"date": "2016-05-12", "name": "线条2", "points": 162.963},{"date": "2016-05-13", "name": "线条2", "points": 146},{"date": "2016-05-17", "name": "线条2", "points": 130},{"date": "2016-05-18", "name": "线条2", "points": 138.845},{"date": "2016-05-19", "name": "线条2", "points": 120.17},{"date": "2016-05-20", "name": "线条2", "points": 149.741},{"date": "2016-05-23", "name": "线条2", "points": 119.668},{"date": "2016-05-24", "name": "线条2", "points": 136.886},{"date": "2016-05-25", "name": "线条2", "points": 108.239},{"date": "2016-05-26", "name": "线条2", "points": 147.239},{"date": "2016-05-27", "name": "线条2", "points": 127.457},{"date": "2016-05-30", "name": "线条2", "points": 137.37},
];const invalidData = [{"date": "2016-01-04", "name": "线条1", "points": 126.12},{"date": "2016-01-05", "name": "线条1", "points": 125.688},{"date": "2016-01-06", "name": "线条1", "points": 119.704},{"date": "2016-01-07", "name": "线条1", "points": 120.19},{"date": "2016-01-08", "name": "线条1", "points": 121.157},{"date": "2016-01-11", "name": "线条1", "points": 117},{"date": "2016-01-12", "name": "线条1", "points": 120},{"date": "2016-01-13", "name": "线条1", "points": 122},{"date": "2016-01-14", "name": "线条1", "points": 117.76},{"date": "2016-01-15", "name": "线条1", "points": 114.397},{"date": "2016-01-18", "name": "线条1", "points": 116.373},{"date": "2016-01-19", "name": "线条1", "points": 120.547},{"date": "2016-01-20", "name": "线条1", "points": 113.733},{"date": "2016-01-21", "name": "线条1", "points": 114.098},{"date": "2016-01-22", "name": "线条1", "points": 123.833},{"date": "2016-01-25", "name": "线条1", "points": 125},{"date": "2016-01-26", "name": "线条1", "points": 124.866},{"date": "2016-01-27", "name": "线条1", "points": 120.264},{"date": "2016-01-28", "name": "线条1", "points": 122.296},{"date": "2016-01-29", "name": "线条1", "points": 124.502},{"date": "2016-02-01", "name": "线条1", "points": 127.936},{"date": "2016-02-02", "name": "线条1", "points": null},{"date": "2016-02-03", "name": "线条1", "points": 129.95},{"date": "2016-02-04", "name": "线条1", "points": 129.275},{"date": "2016-02-05", "name": "线条1", "points": 127.898},{"date": "2016-02-08", "name": "线条1", "points": 134.9},{"date": "2016-02-09", "name": "线条1", "points": 122.819},{"date": "2016-02-10", "name": "线条1", "points": 120.108},{"date": "2016-02-11", "name": "线条1", "points": 119.447},{"date": "2016-02-12", "name": "线条1", "points": 117.8},{"date": "2016-02-15", "name": "线条1", "points": null},{"date": "2016-02-16", "name": "线条1", "points": 121.865},{"date": "2016-02-17", "name": "线条1", "points": 126.3},{"date": "2016-02-18", "name": "线条1", "points": 128.259},{"date": "2016-02-19", "name": "线条1", "points": 125.724},{"date": "2016-02-22", "name": "线条1", "points": 130},{"date": "2016-02-23", "name": "线条1", "points": 129.948},{"date": "2016-02-24", "name": "线条1", "points": 132.5},{"date": "2016-02-25", "name": "线条1", "points": 128.08},{"date": "2016-02-26", "name": "线条1", "points": 122},{"date": "2016-02-29", "name": "线条1", "points": 122},{"date": "2016-03-01", "name": "线条1", "points": 123.449},{"date": "2016-03-02", "name": "线条1", "points": double.nan},{"date": "2016-03-03", "name": "线条1", "points": 132},{"date": "2016-03-04", "name": "线条1", "points": 135},{"date": "2016-03-07", "name": "线条1", "points": 123.905},{"date": "2016-03-08", "name": "线条1", "points": 125.155},{"date": "2016-03-09", "name": "线条1", "points": 126},{"date": "2016-03-10", "name": "线条1", "points": 126.778},{"date": "2016-03-11", "name": "线条1", "points": 129.656},{"date": "2016-03-14", "name": "线条1", "points": 127.64},{"date": "2016-03-15", "name": "线条1", "points": 124.786},{"date": "2016-03-16", "name": "线条1", "points": 124.469},{"date": "2016-03-17", "name": "线条1", "points": 123.5},{"date": "2016-03-18", "name": "线条1", "points": 124.061},{"date": "2016-03-21", "name": "线条1", "points": 123.5},{"date": "2016-03-22", "name": "线条1", "points": 129.002},{"date": "2016-03-23", "name": "线条1", "points": 129},{"date": "2016-03-24", "name": "线条1", "points": 131.31},{"date": "2016-03-29", "name": "线条1", "points": 133},{"date": "2016-03-30", "name": "线条1", "points": 129.298},{"date": "2016-03-31", "name": "线条1", "points": 127.4},{"date": "2016-04-01", "name": "线条1", "points": 122.376},{"date": "2016-04-04", "name": "线条1", "points": 119.467},{"date": "2016-04-05", "name": "线条1", "points": 120.695},{"date": "2016-04-06", "name": "线条1", "points": 118.725},{"date": "2016-04-07", "name": "线条1", "points": 127.539},{"date": "2016-04-08", "name": "线条1", "points": 129.8},{"date": "2016-04-11", "name": "线条1", "points": 129.5},{"date": "2016-04-12", "name": "线条1", "points": 134.465},{"date": "2016-04-13", "name": "线条1", "points": 133},{"date": "2016-04-14", "name": "线条1", "points": 137.35},{"date": "2016-04-15", "name": "线条1", "points": 137.2},{"date": "2016-04-18", "name": "线条1", "points": 132.611},{"date": "2016-04-19", "name": "线条1", "points": 135.479},{"date": "2016-04-20", "name": "线条1", "points": 139.05},{"date": "2016-04-21", "name": "线条1", "points": 142},{"date": "2016-04-22", "name": "线条1", "points": 135.761},{"date": "2016-04-25", "name": "线条1", "points": 136.174},{"date": "2016-04-26", "name": "线条1", "points": 134.782},{"date": "2016-04-27", "name": "线条1", "points": 128},{"date": "2016-04-28", "name": "线条1", "points": 121.5},{"date": "2016-04-29", "name": "线条1", "points": 120},{"date": "2016-05-02", "name": "线条1", "points": 123.966},{"date": "2016-05-03", "name": "线条1", "points": 122.538},{"date": "2016-05-04", "name": "线条1", "points": 120},{"date": "2016-05-05", "name": "线条1", "points": 120.21},{"date": "2016-05-06", "name": "线条1", "points": 121.01},{"date": "2016-05-09", "name": "线条1", "points": double.nan},{"date": "2016-05-10", "name": "线条1", "points": 120.622},{"date": "2016-05-11", "name": "线条1", "points": 123.85},{"date": "2016-05-12", "name": "线条1", "points": 122.963},{"date": "2016-05-13", "name": "线条1", "points": 126},{"date": "2016-05-17", "name": "线条1", "points": 130},{"date": "2016-05-18", "name": "线条1", "points": 128.845},{"date": "2016-05-19", "name": "线条1", "points": 130.17},{"date": "2016-05-20", "name": "线条1", "points": 129.741},{"date": "2016-05-23", "name": "线条1", "points": 129.668},{"date": "2016-05-24", "name": "线条1", "points": 126.886},{"date": "2016-05-25", "name": "线条1", "points": 128.239},{"date": "2016-05-26", "name": "线条1", "points": 127.239},{"date": "2016-05-27", "name": "线条1", "points": 127.457},{"date": "2016-05-30", "name": "线条1", "points": 127.37},{"date": "2016-05-31", "name": "线条1", "points": 130.756},{"date": "2016-06-01", "name": "线条1", "points": 133.232},{"date": "2016-06-02", "name": "线条1", "points": 126.47},{"date": "2016-06-03", "name": "线条1", "points": 126.385},{"date": "2016-06-06", "name": "线条1", "points": 128.331},{"date": "2016-06-07", "name": "线条1", "points": 130.914},{"date": "2016-06-08", "name": "线条1", "points": 133},{"date": "2016-06-09", "name": "线条1", "points": 133.041},{"date": "2016-06-10", "name": "线条1", "points": 133.041},{"date": "2016-06-13", "name": "线条1", "points": 129},{"date": "2016-06-14", "name": "线条1", "points": 129.166},{"date": "2016-06-15", "name": "线条1", "points": 124.687},{"date": "2016-06-16", "name": "线条1", "points": 122.77},{"date": "2016-06-17", "name": "线条1", "points": 126.461},{"date": "2016-06-20", "name": "线条1", "points": 127},{"date": "2016-06-21", "name": "线条1", "points": 125.594},{"date": "2016-06-22", "name": "线条1", "points": 127.438},{"date": "2016-06-23", "name": "线条1", "points": 124.44},{"date": "2016-06-24", "name": "线条1", "points": 122.131},{"date": "2016-06-27", "name": "线条1", "points": 120.53},{"date": "2016-06-28", "name": "线条1", "points": 120.296},{"date": "2016-06-29", "name": "线条1", "points": 125.877},{"date": "2016-06-30", "name": "线条1", "points": 126.404},
];相关文章：
【Flutter】graphic图表实现自定义tooltip
renderer graphic中tooltip的TooltipGuide类提供了renderer方法，接收三个参数Size类型，Offset类型，Map<int, Tuple>类型。可查到的文档是真的少，所以只能在源码中扒拉例子，做符合需求的修改。 官方github示例 …...
手机上的记事本怎么打开？安卓手机通用的记事本APP
有不少上班族发现，自己想要在电脑上随手记录一些工作文字内容，直接使用电脑上的记事本工具来编辑文字是比较便捷的。但是如果想要在手机上记录文字内容，就找不到手机上的记事本了。那么手机上的记事本怎么打开？安卓手机通用的记事…...
一起学docker系列之十五深入了解 Docker Network：构建容器间通信的桥梁
目录 1 前言2 什么是 Docker Network3 Docker Network 的不同模式3.1 桥接模式（Bridge）3.2 Host 模式3.3 无网络模式（None）3.4 容器模式（Container） 4 Docker Network 命令及用法4.1 docker network ls4.2 …...
前端OFD文件预览（vue案例cafe-ofd）
0、提示 下面只有vue的使用示例demo ，官文档参考 cafe-ofd - npm 其他平台可以参考 ofd - npm 官方线上demo: ofd 1、安装包 npm install cafe-ofd --save 2、引入 import cafeOfd from cafe-ofd import cafe-ofd/package/index.css Vue.use(cafeOfd) 3、使…...
Java[list/set]通用遍历方法之Iterator
需求：输入一个字符串 将其拆解成单个汉字 然后一行一个输出 这里要求使用到Arraylist集合实现方法Itrator遍历的原理import java.util.ArrayList; import java.util.Collection; import java.util.Iterator;public class Main{public static void main(String[] arg…...
ubuntu/vscode下的c/c++开发之-CMake语法与练习
Cmake学习 1 语法特性介绍 基本语法格式：指令(参数 1 参数 2...) 参数使用括弧括起参数之间使用空格或分号分开 指令是大小写无关的，参数和变量是大小写相关的 set(HELLO hello.cpp) add_executable(hello main.cpp hello.cpp) ADD_EXECUTABLE(hello ma…...
Java(119):ExcelUtil工具类(org.apache.poi读取和写入Excel)
ExcelUtil工具类(XSSFWorkbook读取和写入Excel)，入参和出参都是：List<Map<String,Object>> 一、读取Excel testdata.xlsx 1、new XSSFWorkbook对象 File file = new File(filePath); FileInputStream fis = new FileInputStream(file);…...
Kong处理web服务跨域
前言 好久没写文章了，大概有半年多了，这半年故事太多，本文写不下，就写写文章标题问题！ 问题描述 关于跨域的本质问题我这里不过多介绍，详细请看历史文章 跨域产生的原因以及常见的解决方案。 我这边是新…...
Kotlin学习——kt里的作用域函数scope function，let，run，with，apply，also
Kotlin 是一门现代但已成熟的编程语言，旨在让开发人员更幸福快乐。 它简洁、安全、可与 Java 及其他语言互操作，并提供了多种方式在多个平台间复用代码，以实现高效编程。 https://play.kotlinlang.org/byExample/01_introduction/02_Functio…...
informer辅助笔记：utils/timefeatures.py
定义了一套与时间特征相关的类和函数，旨在从时间序列数据中提取有用的时间特征，以支持各种时间序列分析和预测任务 from typing import Listimport numpy as np import pandas as pd from pandas.tseries import offsets from pandas.tseries.frequenc…...
[Verilog语法]：===和!==运算符使用注意事项
[Verilog语法]：和!运算符使用注意事项 1， 和 !运算符使用注意事项2，3， 1， 和 !运算符使用注意事项 参考文献： 1，[SystemVerilog语法拾遗] 和!运算符使用注意事项 2， 3，...
mybatis 高并发查询性能问题
场景： 使用Mybatis （3.5.10）SelectProvider注解执行动态sql 在高并发查询时 QPS 很低 问题复现 mybatis 配置 （getOfflineConfigSqlTemplate 该方法返回的是动态sql ） 压测结果 观察线程阻塞情况 此时的QPS 在 …...
我在Vscode学OpenCV 图像处理一（阈值处理、形态学操作【连通性，腐蚀和膨胀，开闭运算，礼帽和黑帽，内核】）
文章目录 一、阈值处理1.1 OpenCV 提供了函数 cv2.threshold()和函数 cv2.adaptiveThreshold()，用于实现阈值处理1.1.1. cv2.threshold()：(1)在函数cv2.threshold()中，参数threshold_type用于指定阈值处理的方式。它有以下几种可选的阈值类型…...
Yolov8实现瓶盖正反面检测
一、模型介绍 模型基于 yolov8n数据集采用SKU-110k，这数据集太大了十几个 G，所以只训练了 10 轮左右就拿来微调了 基于原木数据微调：训练 200 轮的效果 10 轮SKU-110k 20 轮原木 200 轮瓶盖正反面 微调模型下载地址https://wwxd.lanzouu.co…...
GAN：WGAN前作
WGAN前作：有原则的方法来训练GANs 论文：https://arxiv.org/abs/1701.04862 发表：ICLR 2017 本文是wgan三部曲的第一部。文中并没有引入新的算法，而是标是朝着完全理解生成对抗网络的训练动态过程迈进理论性的一步。 文中基本是…...
数据库应用：MongoDB 文档与索引管理
目录 一、理论 1.MongoDB文档管理 2.MongoDB索引管理 二、实验 1.MongoDB文档管理 2.MongoDB索引管理（索引添加与删除） 3.MongoDB索引管理（全文索引） 4.MongoDB索引管理（多列索引） 5.MongoDB索引管…...
Python批处理PDF文件，PDF附件轻松批量提取
PDF附件是指在PDF文档中嵌入的其他文件，如图像、表格、音频、视频或其他文档。这些附件可以与PDF文档一起存储、传输和共享，为文档提供了更丰富的内容和更多的功能。通过添加附件，我们可以将相关文件和信息捆绑在一起，使其更易于管…...
Python可迭代对象排序：深入排序算法与定制排序
更多Python学习内容：ipengtao.com 排序在计算机科学中是一项基础而关键的操作，而Python提供了强大的排序工具来满足不同场景下的排序需求。本文将深入探讨Python中对可迭代对象进行排序的方法，涵盖基础排序算法、sorted函数的应用、以及定制排…...
基于matlab的图像去噪算法设计与实现
摘 要 随着我们生活水平的提高，科技产品飞速更新换代，在信息传输中，图像传输所占的比重越来越大。但自然噪声会在图像传输时干扰其传输过程，甚至会使图片不能表达其原来的意义。去噪处理就是为了去除图像中的噪声，从而…...
NFTScan 正式上线 Starknet NFTScan 浏览器和 NFT API 数据服务
2023 年 11 月 30 号，NFTScan 团队正式对外发布了 Starknet NFTScan 浏览器，将为 Starknet 生态的 NFT 开发者和用户提供简洁高效的 NFT 数据搜索查询服务。NFTScan 作为全球领先的 NFT 数据基础设施服务商，Starknet 是继 Bitcoin、Ethereum、…...
大话软工笔记—需求分析概述
需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树 浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...
Python如何给视频添加音频和字幕
在Python中，给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加，包括必要的代码示例和详细解释。 环境准备 在开始之前，需要安装以下Python库：…...
如何在最短时间内提升打ctf（web)的水平？
刚刚刷完2遍 bugku 的 web 题，前来答题。 每个人对刷题理解是不同，有的人是看了writeup就等于刷了，有的人是收藏了writeup就等于刷了，有的人是跟着writeup做了一遍就等于刷了，还有的人是独立思考做了一遍就等于刷了。…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源 论文&a…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
MyBatis中关于缓存的理解
MyBatis缓存 MyBatis系统当中默认定义两级缓存：一级缓存、二级缓存 默认情况下，只有一级缓存开启（sqlSession级别的缓存）二级缓存需要手动开启配置，需要局域namespace级别的缓存 一级缓存（本地缓存&#…...
：工厂方法模式、单例模式和生成器模式)
上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式
简介 在我的 QT/C 开发工作中，合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式：工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...
的打车小程序)
基于鸿蒙(HarmonyOS5)的打车小程序
1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...
UE5 音效系统
一.音效管理 音乐一般都是WAV,创建一个背景音乐类SoudClass,一个音效类SoundClass。所有的音乐都分为这两个类。再创建一个总音乐类，将上述两个作为它的子类。 接着我们创建一个音乐混合类SoundMix，将上述三个类翻入其中，通过它管理每个音乐…...