麻辣翅尖

Flutter之Graphic图表的简单示例

简介

Graphic是一个数据可视化语法和Flutter图表库。

官方github示例
我的gitee示例

网上可用资源很少，只有作者的几篇文章，并且没有特别详细的文档，使用的话还是需要一定的时间去调研，在此简单记录。

示例

以折线图为例（因为我只用到了折线图，但其他的图大差不差）

创建一个两个文件：linePage.dart和数据文件data.dart
创建main.dart，引入linePage.dart

// main.dart
import 'package:flutter/material.dart';
import './linePage.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Graphic Example',
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Flutter Graphic Example'),
          ),
          body: linePage(),
        ));
  }
}

// linePage.dart 
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:graphic/graphic.dart';
import 'package:intl/intl.dart';

import './data.dart';

class linePage extends StatelessWidget {
  linePage({super.key});

  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget 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轴刻度数量
                    ),
                  ),
                  'points': Variable(
                  // 数据值
                    accessor: (Map map) => (map['points'] ?? double.nan) as num,
                  ),
                },

                marks: [
                  // 线条与X轴之间区域填充
                  AreaMark(
                    shape: ShapeEncode(
                      value:
                          BasicAreaShape(smooth: true), // smooth: true 使线条变得平滑
                    ),
                    color: ColorEncode(
                      value: Colors.pink.withAlpha(80),
                    ),
                  ),
                  // 线条
                  LineMark(
                    shape: ShapeEncode(
                      value: BasicLineShape(smooth: true),
                    ),
                    // 粗细
                    size: SizeEncode(value: 1.5),
                  ),
                ],
                // 坐标轴配置
                axes: [
                  Defaults.horizontalAxis,
                  Defaults.verticalAxis,
                ],
                /** 选项配置
                * 可以写多个，提供给tooltip单独配置selections：{‘touchMove’}选择
                * 或者marks中LineMark的color属性的updaters
                */
                selections: {
                // 'touchMove'名称随意起，一般与是功能性描述词
                  'touchMove': PointSelection(
                    on: { //on里面配置操作选项
                      GestureType.scaleUpdate, // 可垂直或水平移动准线
                      GestureType.tapDown,     // 点击
                      GestureType.longPressMoveUpdate  //长按拖动
                    },
                    dim: Dim.x,
                  )
                },
                // 触摸弹框提示
                tooltip: TooltipGuide(
                  //未单独配置 selections，默认使用上面的selections中配置
                  // 跟随鼠标位置（感觉主要是看第二项是true，tooltip框才会跟随，false会随着鼠标移动乱动）
                  followPointer: [false, true],
                  align: Alignment.topLeft, // tooltip弹框对于点击位置的对齐方式
                  offset: const Offset(-20, -20), //  位置偏移量，结合align
                ),
                // 十字准线
                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,
                // 根据给定线条数据的name值相同的为同一条线
                variables: {
                  'date': Variable(
                    accessor: (Map map) => map['date'] as String,
                    scale: OrdinalScale(tickCount: 5, inflate: true),
                  ),
                  'points': Variable(
                    accessor: (Map map) => (map['points'] ?? double.nan) as num,
                  ),
                  'name': Variable(
                    accessor: (Map map) => map['name'] as String,
                  ),
                },
                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'是在selections中配置的
                      //   '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},
                    // 设备[mouse(鼠标),stylus(手写笔),invertedStylus,trackpad(触控板)，touch(触摸屏)，unknown]
                    // 参考资料：https://api.flutter.dev/flutter/dart-ui/PointerDeviceKind.html
                    devices: {
                    	PointerDeviceKind.mouse // 鼠标 （该配置在鼠标设备时生效）
                    },
                    // 显示此处date相同的数据
                    variable: 'date',
                  ),
                  'groupMouse': PointSelection(
                  	// 触发的交互
                  	// 参考资料：https://pub.dev/documentation/keyboard_dismisser/latest/keyboard_dismisser/GestureType.html
                    on: {
                      GestureType.hover, // 覆盖
                    },
                    // variable: 'name',
                    devices: {PointerDeviceKind.mouse},
                  ),
                  'tooltipTouch': PointSelection(
                    on: {
                      GestureType.scaleUpdate, 
                      GestureType.tapDown, //点击
                      GestureType.longPressMoveUpdate 
                    },
                    // variable: 'name',
                    devices: {
                    	PointerDeviceKind.touch，  // 触摸屏（仅在触摸设备生效：神奇的是不包括iOS）
                    },
                  ),
                  'tooltipTouchIos': PointSelection(
                    on: {
                      GestureType.scaleUpdate,
                      GestureType.tapDown,
                      GestureType.longPressMoveUpdate
                    },
                    // variable: 'name',
                    devices: {
                    	// 未知设备（不明白为啥iOS被识别成了unknown，猜测可能与ios中的触摸事件有关）
                    	PointerDeviceKind.unknown, 
                    },
                  ),
                },
                tooltip: TooltipGuide(
                  // 选择触发配置
                  selections: {'tooltipTouch', '666'},
                  followPointer: [false, true],
                  align: Alignment.topLeft,
                  // tooltip中显示的内容（按顺序显示）
                  // 与上方selections中定义的variable相排斥
                  variables: [
                    // 'date',
                    'name',
                    'points',
                  ],
                ),
                // 十字准线配置
                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", "points": 126.12},
  {"date": "2016-01-05", "points": 125.688},
  {"date": "2016-01-06", "points": 119.704},
  {"date": "2016-01-07", "points": 120.19},
  {"date": "2016-01-08", "points": 121.157},
  {"date": "2016-01-11", "points": 117},
  {"date": "2016-01-12", "points": 120},
  {"date": "2016-01-13", "points": 122},
  {"date": "2016-01-14", "points": 117.76},
  {"date": "2016-01-15", "points": 114.397},
  {"date": "2016-01-18", "points": 116.373},
  {"date": "2016-01-19", "points": 120.547},
  {"date": "2016-01-20", "points": 113.733},
  {"date": "2016-01-21", "points": 114.098},
  {"date": "2016-01-22", "points": 123.833},
  {"date": "2016-01-25", "points": 125},
  {"date": "2016-01-26", "points": 124.866},
  {"date": "2016-01-27", "points": 120.264},
  {"date": "2016-01-28", "points": 122.296},
  {"date": "2016-01-29", "points": 124.502},
  {"date": "2016-02-01", "points": 127.936},
  {"date": "2016-02-02", "points": null},
  {"date": "2016-02-03", "points": 129.95},
  {"date": "2016-02-04", "points": 129.275},
  {"date": "2016-02-05", "points": 127.898},
  {"date": "2016-02-08", "points": 134.9},
  {"date": "2016-02-09", "points": 122.819},
  {"date": "2016-02-10", "points": 120.108},
  {"date": "2016-02-11", "points": 119.447},
  {"date": "2016-02-12", "points": 117.8},
  {"date": "2016-02-15", "points": null},
  {"date": "2016-02-16", "points": 121.865},
  {"date": "2016-02-17", "points": 126.3},
  {"date": "2016-02-18", "points": 128.259},
  {"date": "2016-02-19", "points": 125.724},
  {"date": "2016-02-22", "points": 130},
  {"date": "2016-02-23", "points": 129.948},
  {"date": "2016-02-24", "points": 132.5},
  {"date": "2016-02-25", "points": 128.08},
  {"date": "2016-02-26", "points": 122},
  {"date": "2016-02-29", "points": 122},
  {"date": "2016-03-01", "points": 123.449},
  {"date": "2016-03-02", "points": double.nan},
  {"date": "2016-03-03", "points": 132},
  {"date": "2016-03-04", "points": 135},
  {"date": "2016-03-07", "points": 123.905},
  {"date": "2016-03-08", "points": 125.155},
  {"date": "2016-03-09", "points": 126},
  {"date": "2016-03-10", "points": 126.778},
  {"date": "2016-03-11", "points": 129.656},
  {"date": "2016-03-14", "points": 127.64},
  {"date": "2016-03-15", "points": 124.786},
  {"date": "2016-03-16", "points": 124.469},
  {"date": "2016-03-17", "points": 123.5},
  {"date": "2016-03-18", "points": 124.061},
  {"date": "2016-03-21", "points": 123.5},
  {"date": "2016-03-22", "points": 129.002},
  {"date": "2016-03-23", "points": 129},
  {"date": "2016-03-24", "points": 131.31},
  {"date": "2016-03-29", "points": 133},
  {"date": "2016-03-30", "points": 129.298},
  {"date": "2016-03-31", "points": 127.4},
  {"date": "2016-04-01", "points": 122.376},
  {"date": "2016-04-04", "points": 119.467},
  {"date": "2016-04-05", "points": 120.695},
  {"date": "2016-04-06", "points": 118.725},
  {"date": "2016-04-07", "points": 127.539},
  {"date": "2016-04-08", "points": 129.8},
  {"date": "2016-04-11", "points": 129.5},
  {"date": "2016-04-12", "points": 134.465},
  {"date": "2016-04-13", "points": 133},
  {"date": "2016-04-14", "points": 137.35},
  {"date": "2016-04-15", "points": 137.2},
  {"date": "2016-04-18", "points": 132.611},
  {"date": "2016-04-19", "points": 135.479},
  {"date": "2016-04-20", "points": 139.05},
  {"date": "2016-04-21", "points": 142},
  {"date": "2016-04-22", "points": 135.761},
  {"date": "2016-04-25", "points": 136.174},
  {"date": "2016-04-26", "points": 134.782},
  {"date": "2016-04-27", "points": 128},
  {"date": "2016-04-28", "points": 121.5},
  {"date": "2016-04-29", "points": 120},
  {"date": "2016-05-02", "points": 123.966},
  {"date": "2016-05-03", "points": 122.538},
  {"date": "2016-05-04", "points": 120},
  {"date": "2016-05-05", "points": 120.21},
  {"date": "2016-05-06", "points": 121.01},
  {"date": "2016-05-09", "points": double.nan},
  {"date": "2016-05-10", "points": 120.622},
  {"date": "2016-05-11", "points": 123.85},
  {"date": "2016-05-12", "points": 122.963},
  {"date": "2016-05-13", "points": 126},
  {"date": "2016-05-17", "points": 130},
  {"date": "2016-05-18", "points": 128.845},
  {"date": "2016-05-19", "points": 130.17},
  {"date": "2016-05-20", "points": 129.741},
  {"date": "2016-05-23", "points": 129.668},
  {"date": "2016-05-24", "points": 126.886},
  {"date": "2016-05-25", "points": 128.239},
  {"date": "2016-05-26", "points": 127.239},
  {"date": "2016-05-27", "points": 127.457},
  {"date": "2016-05-30", "points": 127.37},
  {"date": "2016-05-31", "points": 130.756},
  {"date": "2016-06-01", "points": 133.232},
  {"date": "2016-06-02", "points": 126.47},
  {"date": "2016-06-03", "points": 126.385},
  {"date": "2016-06-06", "points": 128.331},
  {"date": "2016-06-07", "points": 130.914},
  {"date": "2016-06-08", "points": 133},
  {"date": "2016-06-09", "points": 133.041},
  {"date": "2016-06-10", "points": 133.041},
  {"date": "2016-06-13", "points": 129},
  {"date": "2016-06-14", "points": 129.166},
  {"date": "2016-06-15", "points": 124.687},
  {"date": "2016-06-16", "points": 122.77},
  {"date": "2016-06-17", "points": 126.461},
  {"date": "2016-06-20", "points": 127},
  {"date": "2016-06-21", "points": 125.594},
  {"date": "2016-06-22", "points": 127.438},
  {"date": "2016-06-23", "points": 124.44},
  {"date": "2016-06-24", "points": 122.131},
  {"date": "2016-06-27", "points": 120.53},
  {"date": "2016-06-28", "points": 120.296},
  {"date": "2016-06-29", "points": 125.877},
  {"date": "2016-06-30", "points": 126.404},
];

效果

参考资料

官方github
作者博客
selections中on参数
selections中设备参数

你可能感兴趣的:(Flutter,flutter)

2024年最全Flutter如何和Native通信-Android视角，Electron开发Android界面 2401_84544531 程序员 android 面试学习
总结【Android详细知识点思维脑图（技能树）】其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。虽然Android没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。这只能说明Android中级以下的岗位饱和了，现在高级工程师还是比较缺少的，很多高级职位给的薪
生成一个完整的App代码通常不会仅仅通过单一的文件或几种语言的简单组合来完成，因为App的开发涉及前端用户界面、后端逻辑处理、数据库管理以及可能的第三方服务集成等多个方面。不过，我可以为你提供一个概念 NewmanEdwarda2 前端 ui 数据库
前端(用户界面)yinanjinying.comHTML/CSS/JavaScript(原生Web开发)对于简单的WebApp，你可以直接使用HTML来构建页面结构，CSS来设置样式，JavaScript来添加交互性。React(JavaScript/TypeScript)对于更复杂的单页应用（SPA），React是一个流行的选择。它允许你构建可复用的UI组件。Flutter(Dart)如果你想要
Flutter函数且听真言 Flutter 函数的定义可选参数命名可选参数位置可选参数参数默认值词法闭包匿名函数
在Dart中，函数为一等公民，可以作为参数对象传递，也可以作为返回值返回。函数定义//返回值(可以不写返回值，但建议写)、函数名、参数列表showMessage(Stringmessage){//函数体print(message);}voidshowMessage(Stringmessage){print(message);}可选参数位置参数：用方括号[]表示，参数根据位置传递给函数；voidsh
Flutter电商项目实践-架构设计 Zhouztashin Flutter flutter 电子商务项目架构
1、框架设计图框架设计总体说明整个框架划分成业务层、组件层、基础层与外部层。其中外部层对应着第三方或者自己封装的提供单独功能的依赖库，基础层主要对应着非UI的基础性功能，组件层对应着UI功能的基础性功能，可以向业务层提供完整可以使用的UI组件功能。业务层则是应用的核心，除了外部层之外，组件层、基础层以库的形式提供给业务层使用，这样的好处是提高了这两层的复用性。框架设计原则层级职责划分需要单一且清晰
flutter页面布局HTML,flutter笔记7：flutter页面布局基础，看完这篇就可以用flutter写APP了... 李致遠 flutter页面布局HTML
不知不觉已经到了第7篇，然而很多萌新玩家可能还是不知道如何堆砌控件，像用CSS一样搭出漂亮的APP界面，我也一样，红红火火恍恍惚惚，直到今天含泪读完Flutter布局基础，仿佛打开了一个全新的世界。基本概念在flutter中，一切皆控件！一切皆控件！一切皆控件！牢牢记住这个概念。Text是控件，Image是控件，Icon是控件，布局脚手架也Scaffold也是控件，甚至整个APP也是控件。用户自定
Flutter 应用程序开发的优缺点 pxr007 flutter android ui
编者注：这篇文章于2022年9月19日更新，包含有关Flutter3.0的信息，以及通过有组织的文档和更快的应用程序开发来增加可访问性。如果您是一位经验丰富的移动应用程序开发人员，那么您已经决定为Android或iOS设备构建应用程序。如果您是初学者，您可能仍在考虑哪个是您的首选平台。这些决定决定了您在成为移动或跨平台应用程序开发人员的道路上应该学习哪些技术。无论您的应用程序开发之旅将您带到哪里，
flutter 泛型_Flutter入门——泛型 weixin_39627408 flutter 泛型
在查看基本数组类型List的API文档，会看到该类型实际上是List。表示法将List标记为泛型(或参数化)类型-具有正式类型参数的类型。按照惯例，大多数类型变量都有单字母名称，例如E，T，S，K和V.为什么要使用泛型类型安全通常需要泛型，除了允许让代码运行之外，还可以：正确指定泛型类型会生成更好的代码。例如，可以使用List(字符串列表)，来表示列表中只包含字符串，这样编译器就会启用类型检查，非
Flutter 升级3.22.3相关报错问题明似水 flutter flutter cocoa macos
Analyzingdependenciesfirebase_analytics:UsingFirebaseSDKversion'10.29.0'definedin'firebase_core'firebase_auth:UsingFirebaseSDKversion'10.29.0'definedin'firebase_core'firebase_core:UsingFirebaseSDKvers
Flutter PDFView：在Flutter应用中嵌入PDF阅读器明似水 flutter flutter pdf
FlutterPDFView：在Flutter应用中嵌入PDF阅读器在移动应用开发中，经常会遇到需要在应用内展示PDF文件的需求。Flutter作为一个跨平台的UI工具包，提供了丰富的包来满足开发者的各种需求。flutter_pdfview就是这样一个包，它允许开发者在iOS和Android平台上无缝地嵌入PDF阅读器。简介flutter_pdfview是一个原生的PDF查看器，支持iOS和And
新版本flutter混编安卓没有flutter类絮语时光 flutter flutter android
Flutter升级到1.12后遇到的问题添加链接描述前些日子评论区里wangwhatlh同学反馈遇到了程序包io.flutter.facade不存在问题，起初我运行了一下之前的项目，发现可以正常运行，加上我自己有一段时间没有用过Flutter了，也就没太重视这个问题。说来也是惭愧，最近又陆续有多位小伙伴反馈了这个问题，我才终于意识到这是一个普遍性问题，简单查了一下了解到这个错误是Flutter1.
cross-plateform 跨平台应用程序-08-Ionic 介绍老马啸西风 java
跨平台系列cross-plateform跨平台应用程序-01-概览cross-plateform跨平台应用程序-02-有哪些主流技术栈？cross-plateform跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?cross-plateform跨平台应用程序-04-ReactNative介绍cross-plateform跨平台应用程序-05-Flutter介绍cross-platefor
cross-plateform 跨平台应用程序-09-phonegap/Apache Cordova 介绍老马啸西风 java
跨平台系列cross-plateform跨平台应用程序-01-概览cross-plateform跨平台应用程序-02-有哪些主流技术栈？cross-plateform跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?cross-plateform跨平台应用程序-04-ReactNative介绍cross-plateform跨平台应用程序-05-Flutter介绍cross-platefor
cross-plateform 跨平台应用程序-10-naitvescript 介绍老马啸西风 java
跨平台系列cross-plateform跨平台应用程序-01-概览cross-plateform跨平台应用程序-02-有哪些主流技术栈？cross-plateform跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?cross-plateform跨平台应用程序-04-ReactNative介绍cross-plateform跨平台应用程序-05-Flutter介绍cross-platefor
cross-plateform 跨平台应用程序-02-有哪些主流技术栈？老马啸西风 java
跨平台系列cross-plateform跨平台应用程序-01-概览cross-plateform跨平台应用程序-02-有哪些主流技术栈？cross-plateform跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?cross-plateform跨平台应用程序-04-ReactNative介绍cross-plateform跨平台应用程序-05-Flutter介绍cross-platefor
cross-plateform 跨平台应用程序-01-概览老马啸西风 java
跨平台系列cross-plateform跨平台应用程序-01-概览cross-plateform跨平台应用程序-02-有哪些主流技术栈？cross-plateform跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?cross-plateform跨平台应用程序-04-ReactNative介绍cross-plateform跨平台应用程序-05-Flutter介绍cross-platefor
Flutter 使用第三方包加载3d模型 AiFlutter flutter 3d
1.O3D（第三方包）这是一个用于以glTF和GLB格式呈现交互式3D模型的Flutter小部件。这个小部件在WebView中嵌入了Google的web组件。在线演示：O3DBabakCode3DUI特性渲染glTF和GLB模型；支持动画模型，具有可配置的自动播放设置；可选地支持将模型启动到AR查看器中；可选地自动旋转模型，具有可配置的延迟；支持小部件的可配置背景颜色。2.使用流程2.1添加依赖在
Flutter3备忘: GetX常用命令 mulegame Flutter flutter
D:\flutter_app\getcreatepagesearch//创建一个firstPage在productContent目录中getcreateview:firstPageonproductContentgetcreateview:secondPageonproductContentgetcreateview:thirdPageonproductContentgetgeneratemode
Flutter框架高阶——Window应用程序设置窗体窗口背景完全透明木颤简叶 Flutter flutter windows 开发语言后端笔记 c++microsoft
文章目录1.修改main.cpp1）C++与Win32API2）EnableTransparency()3）中文注释2.编写Flutter代码1）bitsdojo_window2）window_manager3）区别对比4）同时使用（1）设置初始化代码（2）处理冲突和集成Flutter的文件结构如下，找到图中的main.cpp的文件1.修改main.cppmain.cpp文件中的代码应该和下面差不
探索高效Flutter开发新境界：flutter_getx_template 平奇群Derek
探索高效Flutter开发新境界：flutter_getx_template在这个快节奏的数字时代，开发者们不断寻求更高效、更易维护的框架和技术来构建移动应用。Flutter，以其强大的跨平台能力和优美的声明式语法，已经成为了许多开发者的心头好。今天，我们将向您推荐一款基于GetX库的开源项目——flutter_getx_template，这是一款专为中大型Flutter项目设计的模板，让您的开发
flutter之：GetX 的状态管理神笔码靓
1.状态管理目前，Flutter的几种状态管理器，大多数都涉及到使用ChangeNotifier来更新widget，这对于中大型应用的性能来说是一个糟糕的方法。在Flutter官方文档中查到，ChangeNotifier应该使用1个或最多2个监听器，这使得它实际上无法用于任何中等或大型应用。1.1其他的状态管理器的差别：BLoC非常安全和高效，但是对于初学者来说非常复杂，这使得人们无法使用Flut
Flutter类且听真言 Flutter 类定义及使用构造函数 get/set修饰符对象操作符继承接口和抽象类 Mixins（混入）
Dart中的对象都继承自Object类，单继承（extend关键字）。Dart与Java、kotlin不同的是其无public、private、protected修饰符，默认public，通过在属性名、方法名前加_下划线来定义是否私有。实现一个简单的类classStudent{//默认publicfinalStringname;//默认publicfinalintage;Student(this.
cross-plateform 跨平台应用程序-05-Flutter 介绍老马啸西风 java
跨平台系列cross-plateform跨平台应用程序-01-概览cross-plateform跨平台应用程序-02-有哪些主流技术栈？cross-plateform跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?cross-plateform跨平台应用程序-04-ReactNative介绍cross-plateform跨平台应用程序-05-Flutter介绍cross-platefor
flutter开发多端平台应用的探索上（基本操作）夏目艾拉 flutter 设计模式 java android
前言Flutter是一个跨平台的开发框架，它允许开发者使用相同的代码库来构建iOS、Android、Web和桌面应用程序。最近想了想，自己一直在用flutter开发特定端的应用，但是对于其他端的端特性case，如桌面端的菜单、多窗口、鼠标事件，需要怎么处理还没什么概念，本文旨在简单探索这方面的内容。正文首先就是判断平台了，可以通过如下方式import'dart:io'showPlatform;vo
Flutter学习之九 ListView MQ_Twist
极端很容易，平衡才是最难的。Flutter学习之八Container前言Flutter中的ListView的地位，就好比于iOS中的UITableView，算是最常用的可滚动组件之一，它可以沿一个方向线性排布所有子组件，并且它也支持列表项懒加载（在需要时才会创建）。默认构造函数我们看看ListView的默认构造函数定义：ListView({...//可滚动widget公共参数AxisscrollD
Explore-Flutter-FireStore: 使用Flutter结合Firebase Firestore的实战指南戴洵珠Gerald
Explore-Flutter-FireStore:使用Flutter结合FirebaseFirestore的实战指南Explore-Flutter-FireStoreThisisaFlutterAppwithFirebase'sCloudFireStoreDatabaseandGoogleMap.ThisapprepresentsthatBeautifulUIcanbeimplementedwi
Flutter 自绘组件（CustomPaint与Canvas）绘制虚线、区域、直线（一） goodhighting 程序员 flutter 前端 javascript
有人也许会疑惑，方案1和方案二不都是采用的绘制吗，那可不一定。有的时候解决问题，我们不遵循常规也可以解决问题，满足一时之需了。1、解决问题奇葩方式一：为什么奇葩呢？我们采用多个Container进行竖直或者水平排列完成了效果，至于性能上我们后面慢慢验证了。_lineContainer(){returnContainer(margin:EdgeInsets.only(top:2.0),color:C
flutter app_Flutter App中的错误处理 weixin_26638123 python
flutterappPartofthe‘AWorkinProgress’Series“正在进行的工作”系列的一部分Today,I’mdemonstratinghowtheMVCframeworklibrarypackageisadaptiveandflexibleinitsimplementationofspecificneeds.Inthiscase,I’llshowyouhowtheframe
flutter构建桌面应用_使用Flutter Firebase Part I构建笔记记录应用程序 weixin_26727575 python java
flutter构建桌面应用I’mafanofGoogleKeep,I’vebeenusingitsinceitwaslaunched.Iputpendingtasks,remindersforchores,almostanythingneedstoremember,intoKeep.It’sintuitivetouse,helpsmestayfocusedonthepriorities.我是Goo
如何使用Flutter为iOS和Android应用设置Firebase cukw6666 数据库 android java python ios
Firebaseisagreatbackendsolutionforanyonethatwantstouseauthentication,databases,cloudfunctions,adsandcountlessotherfeatureswithinanapp.Luckilyforus,FlutterhasofficialsupportforFirebasewiththeFlutterFir
Flutter TextField - onChanged 值不会实时更新小f要努力啦 Flutter flutter
问题：今天用Flutter模拟一个登录注册，在判断账号和密码的时候发现即使TextField写了onChanged，绑定的值却不会实时更新。随便打几个字也不会显示不符合账号设定的条件，从print也看出来和输入框绑定的变量的值一直没有更新解决方法：在onChange下再加上setState函数，就可以实现实时更新了child:TextField(onChanged:(value){setState
knob UI插件使用换个号韩国红果果 JavaScript jsonp knob
图形是用canvas绘制的 js代码 var paras = { max:800, min:100, skin:'tron',//button type thickness:.3,//button width width:'200',//define canvas width.,canvas height displayInput:'tr
Android+Jquery Mobile学习系列(5)-SQLite数据库白糖_ JQuery Mobile
目录导航 SQLite是轻量级的、嵌入式的、关系型数据库，目前已经在iPhone、Android等手机系统中使用,SQLite可移植性好，很容易使用，很小，高效而且可靠。因为Android已经集成了SQLite，所以开发人员无需引入任何JAR包，而且Android也针对SQLite封装了专属的API，调用起来非常快捷方便。我也是第一次接触S
impala-2.1.2-CDH5.3.2 dayutianfei impala
最近在整理impala编译的东西，简单记录几个要点：根据官网的信息（https://github.com/cloudera/Impala/wiki/How-to-build-Impala）： 1. 首次编译impala，推荐使用命令： ${IMPALA_HOME}/buildall.sh -skiptests -build_shared_libs -format 2.仅编译BE ${I
求二进制数中1的个数周凡杨 java 算法二进制
解法一：对于一个正整数如果是偶数，该数的二进制数的最后一位是 0 ，反之若是奇数，则该数的二进制数的最后一位是 1 。因此，可以考虑利用位移、判断奇偶来实现。 public int bitCount(int x){ int count = 0; while(x!=0){ if(x%2!=0){ /
spring中hibernate及事务配置 g21121 Hibernate
hibernate的sessionFactory配置：  <bean id="sessionFactory" class="org.springframework.orm.hibernate3.LocalSessionFactoryBean"> <
log4j.properties 使用 510888780 log4j
log4j.properties 使用一.参数意义说明输出级别的种类 ERROR、WARN、INFO、DEBUG ERROR 为严重错误主要是程序的错误 WARN 为一般警告，比如session丢失 INFO 为一般要显示的信息，比如登录登出 DEBUG 为程序的调试信息配置日志信息输出目的地 log4j.appender.appenderName = fully.qua
Spring mvc-jfreeChart柱图（2）布衣凌宇 jfreechart
上一篇中生成的图是静态的，这篇将按条件进行搜索，并统计成图表，左面为统计图，右面显示搜索出的结果。第一步：导包第二步；配置web.xml(上一篇有代码) 建BarRenderer类用于柱子颜色 import java.awt.Color; import java.awt.Paint; import org.jfree.chart.renderer.category.BarR
我的spring学习笔记14-容器扩展点之PropertyPlaceholderConfigurer aijuans Spring3
PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现，也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。 PropertyPlaceholderConfigurer可以将上下文（配置文件）中的属性值放在另一个单独的标准java
maven 之 cobertura 简单使用 antlove maven test unit cobertura report
1. 创建一个maven项目 2. 创建com.CoberturaStart.java package com; public class CoberturaStart { public void helloEveryone(){ System.out.println("=================================================
程序的执行顺序百合不是茶 JAVA执行顺序
刚在看java核心技术时发现对java的执行顺序不是很明白了,百度一下也没有找到适合自己的资料,所以就简单的回顾一下吧代码如下; 经典的程序执行面试题 //关于程序执行的顺序 //例如： //定义一个基类 public class A(){ public A(
设置session失效的几种方法 bijian1013 web.xml session失效监听器
在系统登录后，都会设置一个当前session失效的时间，以确保在用户长时间不与服务器交互，自动退出登录，销毁session。具体设置很简单，方法有三种：（1）在主页面或者公共页面中加入：session.setMaxInactiveInterval(900);参数900单位是秒，即在没有活动15分钟后，session将失效。这里要注意这个session设置的时间是根据服务器来计算的，而不是客户端。所
java jvm常用命令工具 bijian1013 java jvm
一.概述程序运行中经常会遇到各种问题，定位问题时通常需要综合各种信息，如系统日志、堆dump文件、线程dump文件、GC日志等。通过虚拟机监控和诊断工具可以帮忙我们快速获取、分析需要的数据，进而提高问题解决速度。本文将介绍虚拟机常用监控和问题诊断命令工具的使用方法，主要包含以下工具: &nbs
【Spring框架一】Spring常用注解之Autowired和Resource注解 bit1129 Spring常用注解
Spring自从2.0引入注解的方式取代XML配置的方式来做IOC之后，对Spring一些常用注解的含义行为一直处于比较模糊的状态，写几篇总结下Spring常用的注解。本篇包含的注解有如下几个： Autowired Resource Component Service Controller Transactional 根据它们的功能、目的，可以分为三组，Autow
mysql 操作遇到safe update mode问题 bitray update
我并不知道出现这个问题的实际原理,只是通过其他朋友的博客,文章得知的一个解决方案,目前先记录一个解决方法,未来要是真了解以后,还会继续补全. 在mysql5中有一个safe update mode,这个模式让sql操作更加安全,据说要求有where条件,防止全表更新操作.如果必须要进行全表操作,我们可以执行 SET
nginx_perl试用 ronin47 nginx_perl试用
因为空闲时间比较多，所以在CPAN上乱翻，看到了nginx_perl这个项目(原名Nginx::Engine)，现在托管在github.com上。地址见：https://github.com/zzzcpan/nginx-perl 这个模块的目的，是在nginx内置官方perl模块的基础上，实现一系列异步非阻塞的api。用connector/writer/reader完成类似proxy的功能（这里
java-63-在字符串中删除特定的字符 bylijinnan java
public class DeleteSpecificChars { /** * Q 63 在字符串中删除特定的字符 * 输入两个字符串，从第一字符串中删除第二个字符串中所有的字符。 * 例如，输入”They are students.”和”aeiou”，则删除之后的第一个字符串变成”Thy r stdnts.” */ public static voi
EffectiveJava--创建和销毁对象 ccii 创建和销毁对象
本章内容： 1. 考虑用静态工厂方法代替构造器 2. 遇到多个构造器参数时要考虑用构建器（Builder模式） 3. 用私有构造器或者枚举类型强化Singleton属性 4. 通过私有构造器强化不可实例化的能力 5. 避免创建不必要的对象 6. 消除过期的对象引用 7. 避免使用终结方法 1. 考虑用静态工厂方法代替构造器类可以通过
[宇宙时代]四边形理论与光速飞行 comsci
从四边形理论来推论为什么光子飞船必须获得星光信号才能够进行光速飞行？一组星体组成星座向空间辐射一组由复杂星光信号组成的辐射频带，按照四边形-频率假说一组频率就代表一个时空的入口那么这种由星光信号组成的辐射频带就代表由这些星体所控制的时空通道，该时空通道在三维空间的投影是一
ubuntu server下python脚本迁移数据 cywhoyi python Kettle pymysql cx_Oracle ubuntu server
因为是在Ubuntu下，所以安装python、pip、pymysql等都极其方便，sudo apt-get install pymysql，但是在安装cx_Oracle（连接oracle的模块）出现许多问题，查阅相关资料，发现这边文章能够帮我解决，希望大家少走点弯路。http://www.tbdazhe.com/archives/602 1.安装python 2.安装pip、pymysql
Ajax正确但是请求不到值解决方案 dashuaifu Ajax async
Ajax正确但是请求不到值解决方案解决方案：1 . async: false , 2. 设置延时执行js里的ajax或者延时后台java方法！！！！！！！例如： $.ajax({ &
windows安装配置php+memcached dcj3sjt126com PHP Install memcache
Windows下Memcached的安装配置方法 1、将第一个包解压放某个盘下面，比如在c:\memcached。 2、在终端（也即cmd命令界面）下输入 'c:\memcached\memcached.exe -d install' 安装。 3、再输入： 'c:\memcached\memcached.exe -d start' 启动。（需要注意的: 以后memcached将作为windo
iOS开发学习路径的一些建议 dcj3sjt126com ios
iOS论坛里有朋友要求回答帖子，帖子的标题是：想学IOS开发高阶一点的东西，从何开始，然后我吧啦吧啦回答写了很多。既然敲了那么多字，我就把我写的回复也贴到博客里来分享，希望能对大家有帮助。欢迎大家也到帖子里讨论和分享，地址：http://bbs.csdn.net/topics/390920759 下面是我回复的内容：结合自己情况聊下iOS学习建议，
Javascript闭包概念 fanfanlovey JavaScript 闭包
1.参考资料 http://www.jb51.net/article/24101.htm http://blog.csdn.net/yn49782026/article/details/8549462 2.内容概述要理解闭包，首先需要理解变量作用域问题内部函数可以饮用外面全局变量 var n=999; 　　functio
yum安装mysql5.6 haisheng mysql
1、安装http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm 2、yum install mysql 3、yum install mysql-server 4、vi /etc/my.cnf 添加character_set_server=utf8
po/bo/vo/dao/pojo的详介 IT_zhlp80 java BO VO DAO POJO po
JAVA几种对象的解释 PO:persistant object持久对象,可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录，多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作. VO:value object值对象。通常用于业务层之间的数据传递，和PO一样也是仅仅包含数据而已。但应是抽象出的业务对象,可
java设计模式 kerryg java 设计模式
设计模式的分类：一、设计模式总体分为三大类： 1、创建型模式（5种）：工厂方法模式，抽象工厂模式，单例模式，建造者模式，原型模式。 2、结构型模式（7种）：适配器模式，装饰器模式，代理模式，外观模式，桥接模式，组合模式，享元模式。 3、行为型模式（11种）：策略模式，模版方法模式，观察者模式，迭代子模式，责任链模式，命令模式，备忘录模式，状态模式，访问者
[1]CXF3.1整合Spring开发webservice——helloworld篇木头.java spring webservice CXF
Spring 版本3.2.10 CXF 版本3.1.1 项目采用MAVEN组织依赖jar 我这里是有parent的pom，为了简洁明了，我直接把所有的依赖都列一起了，所以都没version，反正上面已经写了版本 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht
Google 工程师亲授：菜鸟开发者一定要投资的十大目标 qindongliang1922 工作感悟人生
身为软件开发者，有什么是一定得投资的？ Google 软件工程师 Emanuel Saringan 整理了十项他认为必要的投资，第一项就是身体健康，英文与数学也都是必备能力吗？来看看他怎么说。（以下文字以作者第一人称撰写））你的健康无疑地，软件开发者是世界上最久坐不动的职业之一。每天连坐八到十六小时，休息时间只有一点点，绝对会让你的鲔鱼肚肆无忌惮的生长。肥胖容易扩大罹患其他疾病的风险，
linux打开最大文件数量1,048,576 tianzhihehe c linux
File descriptors are represented by the C int type. Not using a special type is often considered odd, but is, historically, the Unix way. Each Linux process has a maximum number of files th
java语言中PO、VO、DAO、BO、POJO几种对象的解释衞酆夼 java VO BO POJO po
PO:persistant object持久对象最形象的理解就是一个PO就是数据库中的一条记录。好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。可以看成是与数据库中的表相映射的java对象。最简单的PO就是对应数据库中某个表中的一条记录，多个记录可以用PO的集合。PO中应该不包含任何对数据库的操作。 BO:business object业务对象封装业务逻辑的java对象