🛰️

ここはどこ -flutter_echartsのScatter3Dを使う

どんぐり

2024/07/19に公開

Flutter

JSON

tech

宇宙における位置を表示する

『四次元年表』の位置表示は、これまで、Unityを使ってつくってきた。
が、どうも接続がよくない。
せっかくServerpodも使っていることだし、Full-Stack-Dartを謳ってみたい気もする。
ということで今回は、flutter_echartに挑戦する。

これはEChartsというJavaScriptのライブラリをFlutterで使えるようにしているものらしい。

本来は統計データの可視化に使うんだろうけれど、
三次元散布図(Scatter3D)なら、空間内の位置表示ができるはずなので、流用する。

導入

pubspec.yamlに書く
pub.getする
対象ページにimportする
ここまではふつう。

gl_scriptってなんだ

ApacheのEChartsには、ほんとに多種多様な表現形態があるのだけれど、
flutter_enchartsはその一部しかサポートしていない。
その中でも、「無条件で」使えるものはわずかしかないらしい。
私が使おうとしているScatter3Dは、このgl_scriptを書いておかないと使えない。
一見、３行に見えるファイルだが、めちゃくちゃ長いので、
覚悟してcopyしましょう。

scaffoldeKeyってなんだ

はじめて見た（甘ちゃんなので）、でも書かないと表示されない。

SizedBox

サイズを確定しておかないと、表示されない。
だけど、けっこうはみ出しても見えたりする。なんで？

データ直書きで試行錯誤中

x軸、y軸、z軸は目立たなくした。
x軸プラス方向がうお座、y軸プラス方向がふたご座、z軸プラス方向が北極星であることを表示。
空間を刻むグリッド線は消した。
その代わり、惑星の軌道を書いた。
中心はもちろん太陽。

import 'package:flutter/material.dart';
import 'package:flutter_echarts/flutter_echarts.dart';
import 'gl_script.dart' show glScript;

class Voyager1 extends StatefulWidget {
  const Voyager1({super.key});

  @override
  Voyager1State createState() => Voyager1State();
}

class Voyager1State extends State<Voyager1> {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        title: const Text('3D Scatter Chart Example'),
      ),
      body: Center(
        child: SizedBox(
          width: 1200,
          height: 1000,
          child: Echarts(
            extensions: const [glScript],
            option: '''
        　{
          grid3D: {
            viewControl: {
              alpha: 40,
              beta: -60　//これがなんのおまじないか、よくわからない。
            }
        　　},
          xAxis3D: {
            type: 'value',
            min: -500,
            max: 500,
            splitLine: {show: false}  //全体のグリッドを消す
            name: 'Pisces-Virgo', //うお座おとめ座線
            axisLine: {lineStyle: {color: '#E6E1E6'}} //軸線を目立たなく   
          },
          yAxis3D: {
            type: 'value',
            min: -500,
            max: 500,
            splitLine: {show: false}                  
            name: 'Gemini-Sagittarius', ふたご座いて座線
            axisLine: {lineStyle: {color: '#E6E1E6'}}       
          },
          zAxis3D: {
            type: 'value',
            min: -500,
            max: 500,
            splitLine: {show: false}
            name: 'North Ecliptic Pole', //北極星方向
            axisLine: {lineStyle: {color: '#E6E1E6'}}
          },
          series: [{
            type: 'scatter3D',
            symbolSize: 5,
            data: [
              {
              value: [0, 0, 0],
              name: 'Sun',
              itemStyle: {
                color: 'red'
              }
              },
              {
              value: [14.5, -4.2, 0],
              name: 'launch',
              itemStyle: {
                color: '#8069BF'
              }
              },
              {
              value: [15.7, 4.1, 0.2],
              name: 'oct',              
              itemStyle: {
                color: '#CFBCFF'
              }
              },
                        //中略
              }, 
              {
              value: [-26.74, 54.36, 0.80],
              name: '78',
              itemStyle: {
                color: '#8069BF'
              } 
              },
              {
              value: [-79.34, 44.63, 2.37],
              name: '79',
              itemStyle: {
                color: '#8069BF'
              } 
              },              
                        //中略
              {
              value: [-336.2, -1093.1, 791.8],
              name: '04',
              itemStyle: {
                color: '#8069BF'
              } 
              }, 
            ],
            label: {
              show: true,
              textStyle: {
                fontSize: 12,
                borderWidth: 1
              },
              formatter: function (param) {
                return param.data.name;　各ポイントにラベルを貼る
              }
            },
            itemStyle: {
              opacity: 0.8
              }
            },
            {
          type: 'scatter3D',
          symbolSize: 2,
          data: (function () {
            var data = [];
            for (var t = 0; t < 2 * Math.PI; t += 0.1) {
              var x = 14.96 * Math.cos(t);
              var y = 14.96 * Math.sin(t);
              var z = 0;  // z軸は0で固定
              data.push([x, y, z]);
            }
            return data;
          })(),
          itemStyle: { color: '#FF6347' }  // 地球
          },
          {
          type: 'scatter3D',
          symbolSize: 2,
          data: (function () {
            var data = [];
            for (var t = 0; t < 2 * Math.PI; t += 0.1) {
              var x = 22.8 * Math.cos(t);
              var y = 22.8 * Math.sin(t);
              var z = 0;  // z軸は0で固定
              data.push([x, y, z]);
            }
            return data;
          })(),
          itemStyle: { color: '#FF6347' }  //火星
          },
          {
          type: 'scatter3D',
          symbolSize: 2,
          data: (function () {
            var data = [];
            for (var t = 0; t < 2 * Math.PI; t += 0.05) {
              var x = 77.85 * Math.cos(t);
              var y = 77.85 * Math.sin(t);
              var z = 0;  // z軸は0で固定
              data.push([x, y, z]);
            }
            return data;
          })(),
          itemStyle: { color: '#FF6347' }  // 木星
          },                   
          ]
        }
        ''',
          ),
        ),
      ),
    );
  }
}