ドラッグ可能で編集可能なガントチャートの詳細な説明（HighchartsはVueとReactで使用できます）

<div class="hightChart-gantt">
    <div id="コンテナ"></div>
    <button @click="getData">現在のデータを印刷</button>
  </div>
</テンプレート>

<スクリプト>
'vue' から {defineComponent、onMounted、ref} をインポートします。
'@jsModule/highcharts/highcharts-gantt.src.js' から Highcharts として * をインポートします。
'dayjs' から dayjs をインポートします
'./constants' から{ WEEKS } をインポートします

// API ドキュメント: https://api.Highcharts.com.cn/gantt/index.html
// コミュニティアドレス: https://forum.jianshukeji.com/tags/c/Highcharts/35/Highcharts-gantt
// 公式例: https://www.highcharts.com.cn/demo/gantt/interactive-gantt

//解決すべき問題// 1. ドラッグ中断: ユーザー操作を検証する必要がありますが、現在のところ、ユーザー操作を中断する方法がわかりません。
// 解決策: 現在のアプローチは、ドロップで判断を行い、ビジネス ロジックに基づいてプロンプトを作成し、データを再レンダリングすることです。実行可能ですが、十分にフレンドリーではありません。


エクスポートデフォルトdefineComponent({
  名前: 'hightCharts-gantt',
  コンポーネント: {},
  設定 （） {
    const gantt = ref({});
    // 公式の推奨は UTC 時間を使用することです。ビジネス上のニーズにより、データベース時間との一貫性を保つ必要があります。これはデータベースの保存形式によって異なります。const data = [
      {開始: '2021-6-1 0'、終了: '2021-6-1 18'、工場: 'Huawei'、材料: 'P50'、uid: 1、y: 0、完了: 0.35}、 
      {開始: '2021-6-2 8'、終了: '2021-6-2 16'、工場: 'Huawei'、材質: 'P50'、uid: 2、y: 0}、 
      {開始: '2021-6-3 8'、終了: '2021-6-4 24'、工場: 'Huawei'、材質: 'P50'、uid: 3、y: 0}、 
      {開始: '2021-6-4 12'、終了: '2021-6-5 15'、工場: 'Huawei'、材質: 'P50'、uid: 4、y: 0}、 

      {開始: '2021-6-1 8'、終了: '2021-6-1 12'、工場: 'Xiaomi'、素材: 'Redmi 3'、uid: 5、y: 1}、 
      {開始: '2021-6-3 3'、終了: '2021-6-3 9'、工場: 'Xiaomi'、素材: 'Redmi 3'、uid: 6、y: 1}、 

      {開始: '2021-6-1 6'、終了: '2021-6-1 16'、工場: 'Apple'、素材: 'iPhone13'、uid: 7、y: 2}、 
      {開始: '2021-6-2 3'、終了: '2021-6-2 19'、工場: 'Apple'、素材: 'iPhone13'、uid: 8、y: 2}、 
      {開始: '2021-6-3 8'、終了: '2021-6-3 17'、工場: 'Apple'、素材: 'iPhone13'、uid: 9、y: 2}、 

      {開始: '2021-6-1 12'、終了: '2021-6-1 24'、工場: 'OPPO'、素材: 'Reno7'、uid: 10、y: 3}、
      {開始: '2021-6-2 5'、終了: '2021-6-2 18'、工場: 'OPPO'、素材: 'Reno7'、uid: 11、y: 3}、
      {開始: '2021-6-3 1'、終了: '2021-6-5 12'、工場: 'OPPO'、素材: 'Reno7'、uid: 12、y: 3}、
    ];
    newData = data.map(item => { とする
      アイテムの開始 = dayjs(アイテムの開始).valueOf();
      アイテムの終了 = dayjs(アイテムの終了).valueOf();
      返品商品
    });
    
    // グローバル設定。アイコンを初期化する前に設定する必要があります。Highcharts.setOptions({
      グローバル：
        useUTC: false // UTC 時間を使用しない}, // すべてデフォルトで英語ですが、一部中国語に翻訳されています lang: {
        noData: 「まだデー​​タがありません」
        平日: ['月曜日'、'火曜日'、'水曜日'、'木曜日'、'金曜日'、'土曜日'、'日曜日']、
        月: ['1月'、'1月'、'3月'、'4月'、'5月'、'6月'、'7月'、'8月'、'9月'、'10月'、'11月'、'12月']
      },
    });
    const ドラッグ開始 = (e) => {
    }
    定数ドラッグ = (e) => {
    }
    定数ドロップ = (e) => {
      const { newPoint = {}、ターゲット = {} } = e;
      newPoint.y が 0 の場合
        list = [] とし、 tar = newData.find(item => item.y === newPoint.y && item.uid !== target.uid);
        リスト = newData.map(item => {
          // 現在のドラッグデータ if(item.uid === target.uid) {
            戻る {
              ...アイテム、
              ファクトリー: tar.factory、
              材質: タール、 
              ...新しいポイント
            }
          } それ以外 {
            返品商品
          }
        })
        gantt.value.update({
          シリーズ： [{
            データ: リスト
          }]
        })
      }
    }
    // 選択すると、ビジネスデータを編集するためのウィンドウがポップアップ表示されます。const handleSelect = (e) => {
      console.log('選択済み')
    }
    // 最終データを取得する const getData = () => {
      データを gantt.value.series[0].data.map(item => { とします。
        戻る {
          uid: アイテム.uid、
          工場: アイテム.工場、
          素材: アイテム.素材、
          開始: アイテム.開始、
          終了: 項目.終了
        }
      })
      コンソール.log(データ)
    }


    マウント時(() => {
      試す {
        gantt.value = Highcharts.ganttChart('コンテナ', {
          タイトル：
            テキスト: 'hightCharts ガントチャートの例'
          },
          x軸: [{
            現在の日付インジケーター: true、
            ティックピクセル間隔: 70,
            グリッド: {
              borderWidth: 1, // 右ヘッダーの境界線の幅 cellHeight: 35, // 右日付ヘッダーの高さ },
            ラベル: {
              配置: '中央'、
              フォーマッタ: 関数() {
                `${dayjs(this.value).format('M月D')} ${WEEKS[dayjs(this.value).day()]}` を返します。
              }
            },
          }, {
            ラベル: {
              配置: '中央'、
              フォーマッタ: 関数() {
                `${dayjs(this.value).format('YYYY年M月')}` を返します。
              }
            },
          }],
          y軸: {
            タイプ: 'カテゴリ',
            グリッド: {
              有効: true、
              境界線の色: 'rgba(0,0,0,0.3)',
              境界線の幅: 1,
              列: [
                { タイトル: { テキスト: '工場' }, ラベル: { フォーマット: '{point.factory}' } }, 
                { タイトル: { テキスト: 'モデル' }, ラベル: { フォーマット: '{point.material}' } }, 
              ]
            }
          },
          ツールチップ: {
            フォーマッタ: 関数 () {
              `<div> を返します
               ファクトリー: ${this.point.factory}
              開始時刻: ${dayjs(this.point.start).format('YYYY-MM-DD HH:mm:ss')}}
              終了時間: ${dayjs(this.point.end).format('YYYY-MM-DD HH:mm:ss')'',
              </div>`
            }
          },
          シリーズ: [{ データ: newData }],
          プロットオプション: {
            シリーズ： {
              animation: false, // 依存関係コネクタをアニメーション化しない
              ドラッグドロップ: {
                draggableX: true, // 水平ドラッグ draggableY: true, // 垂直ドラッグ dragMinY: 0, // 垂直ドラッグ下限 dragMaxY: 3, // 垂直ドラッグ上限 dragPrecisionX: 3600000 // 水平ドラッグ精度（ミリ秒単位）},
              データラベル: {
                有効: true、
                フォーマット: '{point.factory}-{point.uid}',
                スタイル: {
                  カーソル: 'デフォルト',
                  ポインタイベント: 'なし'
                }
              },
              allowPointSelect: true、
              ポイント： {
                イベント: {
                  ドラッグ開始: ドラッグ開始、
                  ドラッグ: ドラッグ、
                  ドロップ: ドロップ、
                  選択: ハンドル選択
                }
              }
            }
          },
          エクスポート: {
            ソース幅: 1000
          },
          credits: { // 右下隅の著作権情報を削除します enabled: false
          },
        });
      } キャッチ（エラー）{
        コンソール.log(エラー)
      }
    })

    戻る {
      ガント、
      データを取得
    }
  },
})
</スクリプト>

<スタイルスコープ>
.hightChart-gantt {
  オーバーフローx: 自動;
    -webkit-オーバーフロースクロール: タッチ;
}
＃容器 {
    最大幅: 1200px;
    最小幅: 800px;
    高さ: 400px;
    マージン: 1em 自動;
}
</スタイル>