図面チャート ファイルを選択するための <select> メソッドを作成します。

Question

外部ファイルのデータを使用して描画したグラフがあります。次に、ユーザーが読み取るファイルを選択できる選択ボックスが必要です。このようにして、チャートを動的に変更できます。 vue と chartjs を使用してこの機能を実現するにはどうすればよいですか?

現在、ホームに次のようにデータをインポートしています。

<テンプレート>
  <div class="ホーム">
    <グラフ :vul_data="データ"/>
  </div>
</テンプレート>

<スクリプト>
import { Component, Prop, Vue } from 'vue-property-decorator';
'@/components/Graph.vue' からグラフをインポートします。
'@/data/dataFile.js' から {data} をインポートします

@成分（{
  コンポーネント: {
    グラフ、
  }、
})
デフォルトクラス HomeView をエクスポートして Vue を拡張 {
  データ（） {
    戻る {
      データ: データ、
    }
  }
}
</script>

各ファイルのデータは次のとおりです。

const データのエクスポート = {
    「ポイント」: {
      "ライン1"： {
        "バツ"： [
          -11、
          -11、
        ]、
        "y": [
          7、
          8、
        】
      }、
    }、
}

コンポーネントは次のとおりです。

<テンプレート>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</テンプレート>
<スクリプト>

「chart.js/auto」からチャートをインポートします。

デフォルトをエクスポート{
  名前: "グラフ"、
  小道具: ["vul_data"],

  マウントされた(){
    const ctx = document.getElementById('myChart');
    const myChart = 新しいチャート(ctx, {
        タイプ: '散布'、
        データ： {
          データセット: [{
            ラベル: '行 1'、
            データ：[
              {x: this.vul_data.points.line1.x[0], y: this.vul_data.points.line1.y[0]},
              {x: this.vul_data.points.line1.x[1], y: this.vul_data.points.line1.y[1]},
            ]、
          }、
          】
        }、
    });
  }
}
</スクリプト>
<スタイル>
  
</style>

Answer 1

<select> タグを使用すると、オプションに .js ファイルの名前と同じ値が含まれます。選択内容が変更されたら、ファイルを動的にインポートし、インポートされたデータをプロパティとして Graph コンポーネントに渡す変数に割り当てるメソッドを実行します。簡単なサンプルコード:

リーリー リーリー