FilePickerで読んだCSVデータをScatter3Dに表示する

もっとかんたんな手があったかもしれない・・・

これまで、二つのことをやってきた。

• FilePickerで読んだデータをFlutterで扱えるカタチにする。
• Flutterで扱っているMapを、Scatter3Dで表示できるようにする。
  で、これを単純に繋いだのだけれど、
  もしかして、「いったんMapにする」という作業はほんとに必要だったんだろうか。
  CSVからいきなりScatter3Dに落とし込めないのか・・・？
  そうは言っても、FlutterのTextFieldに入力されたデータとかも混ざるし、
  まあ、取りあえず、これでいいことにしよう。

MapをScatter3Dの形式に書き換える

 Future<void> _loadData() async {
    // widget.parsedData は List<Map<String,dynamic>> として渡されている前提
    final List<dynamic> transformed = (widget.parsedData as List<Map<String, dynamic>>)
        .map((item) => {
      'value': [item['x'], item['y'], item['z']],
      'name': item['id'],
      'itemStyle': {'color': item['color']},
      'symbolSize': item['size'], // sizeでドットの大きさを個別指定
    })
        .toList();

    setState(() {
      scores = transformed;
    });
  }

そして表示する

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        title: const Text("Scatter 3D"),
      ),
      body: Center(
        child: Column(
          children: [
            Text(widget.scatterData.title),  <=　TextFieldに入力されたタイトル
            SizedBox(
              width: 800,
              height: 800,
              child: scores == null
                  ? const CircularProgressIndicator()
                  : Echarts(
                extensions: const [glScript],
                option: '''
    (function() {
      return {
        tooltip: {},
        grid3D: {
          viewControl: {
            alpha: 40,
            beta: -60,
            projection: 'orthographic'
          }
        },
        xAxis3D: {
          type: 'value',
          min: ${widget.scatterData.xAxis.min},　　<=　TextFieldに入力された設定値
          max: ${widget.scatterData.xAxis.max},
          name: '${widget.scatterData.xAxis.legend}',
        },
        yAxis3D: {
          type: 'value',
          min: ${widget.scatterData.yAxis.min},
          max: ${widget.scatterData.yAxis.max},
          name: '${widget.scatterData.yAxis.legend}',
        },
        zAxis3D: {
          type: 'value',
          min: ${widget.scatterData.zAxis.min},
          max: ${widget.scatterData.zAxis.max},
          name: '${widget.scatterData.zAxis.legend}',                         
        },
        series: [
          {
            type: 'scatter3D',
            symbolSize: 5,
            data: ${json.encode(scores)},　　<= CSVから変換したデータ
                label: {
                  show: true,
                  textStyle: {
                    fontSize: 12,
                    borderWidth: 1
                  },
                  formatter: function(param) {
                    return param.data.name;
                  }
                },
                itemStyle: {opacity: 0.8}    
              },   
            ]
                  };
              })()
              ''',
              ),
            ),
          ],
        ),
      ),
    );
  }

こんな感じになる。

で、この表示は保存できるか？

外に出せないデータを扱う、という前提で
今回はデバイス内保存を考えている。
さて、どうしよう？