uniapp軌跡チャートの描き方

モバイル開発では、軌跡チャートは最もよく使用される機能の 1 つです。 Uniapp は、Vue.js フレームワークに基づくクロスプラットフォーム アプリケーション開発フレームワークであり、アプリケーション開発を容易にするいくつかのコンポーネントとプラグインを提供します。 Uniapp では、u-charts プラグインを使用して軌跡図を描画できます。この記事では、Uniapp で u-charts プラグインを使用して軌跡図を描画する方法を紹介します。

1. u-charts プラグインのインストール

u-charts プラグインを使用するには、まずプラグインをインストールする必要があります。

(1) HBuilderX で Uniapp プロジェクトを作成します。

(2) プロジェクトのルート ディレクトリで右クリックし、[ワークスペースの選択]を選択してターミナルを開きます。

(3) 「npm install u-charts -S」と入力し、Enter キーを押してインストールします。

2. vue ファイルで u-charts プラグインを使用する

次に、vue ファイルで u-charts プラグインを導入して使用します。

(1) 軌跡マップを描画する必要があるvueファイル内で、対応するプラグインを参照します。

<template>
  <u-charts ref="uCharts" :canvas-id="'CanvasID'" :canvas-style="'width: 100%; height: 300px;'" :type="'line'" :extra="{line:{type:'curve'}}" :categories="categories" :series="series" :animation="true"></u-charts>
</template>

<script>
import uCharts from '@/components/u-charts/u-charts.vue'

export default {
  components: {
    uCharts
  },
  data () {
    return {
      categories: ['2011', '2012', '2013', '2014', '2015', '2016', '2017'],
      series: [{
        name: '成交量1',
        data: [15, 20, 45, 37, 4, 80, 92],
        color: '#4c9bfd',
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }, {
        name: '成交量2',
        data: [70, 40, 65, 100, 34, 18, 20],
        color: '#ff6347',
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }]
    }
  }
}
</script>

(2) 該当するデータをプラグインに渡します。

上記のコードでは、2 つのデータ カテゴリと系列を渡しました。カテゴリは軌跡チャートの X 軸を表し、系列は Y 軸を表します。これには 2 つのデータ セット、つまり「取引高 1」が含まれます。そして「第2巻」。

(3) レンダリング プラグイン。

マウントされた Vue のライフサイクル関数を使用して、以下に示すように、U チャートをレンダリングする前に DOM ツリーがマウントされていることを確認します:

mounted () {
  this.$nextTick(function () {
    // 在渲染时初始化uCharts，按照官方文档格式传参
    let uCharts = this.$refs.uCharts;
    uCharts.init((canvas, width, height) => { });
  })
}

3. 軌跡チャートの高度なアプリケーション

u-charts プラグインは、軌跡グラフを描画するだけでなく、棒グラフ、円グラフなどの他の形式のグラフも描画できます。軌跡グラフを描画する際には、プラグインが提供する setOption メソッドを使用して、軌跡グラフをより正確にカスタマイズすることもできます。以下は、一般的に使用される軌道マップのカスタマイズ操作の一部です。

(1) タイトルとサブタイトルを設定します。

setOption を使用して、以下に示すようにタイトルとサブタイトルを設定します。

let options = {
  title: {
    text: '轨迹图样例', // 主标题
    subtext: 'uniapp中的轨迹图插件使用', // 副标题
  },
  ...
};
uCharts.setOption(options);

(2) 軌跡チャートの X 軸の下のラベルが回転されます。

軌跡チャートの X 軸の下部ラベルのテキストが多すぎる場合、下部ラベルのテキストを特定の角度で回転して、表示効果を向上させることができます。次のように、rotateLabel メソッドを使用します。

uCharts.rotateLabel({
  category?: string;
  degree?: number;
})

(3) トラック マップのカラー レンダリング。

軌跡マップのカラーレンダリングは、指定されたデータセットに従って個別に設定できます。以下に示すように、setSeriesColors メソッドを使用して、必要に応じて各データ セットの色を設定します。

let colors = ['#4c9bfd', '#ff6347', '#398dcd', '#f99e1c', '#d5317c', '#3a71af', '#75b86c'];
uCharts.setSeriesColors(colors);

(4) トラック ポイントの設定。

トラック ポイントのサイズとスタイルは調整可能です。以下に示すように、setChartStyle メソッドを使用して、トラック ポイントのサイズとトラック ラインの色を設定します:

uCharts.setChartStyle({
  good: {
    pointSize: 5,
    lineColor: '#4c9bfd'
  },
  bad: {
    pointSize: 5,
    lineColor: '#ff6347'
  }
})

上記の紹介は、トラック チャート描画の操作の一部にすぎません。U チャート プラグインは、さまざまなチャート描画やカスタマイズ方法の詳細については、u-charts の公式ドキュメントを参照してください。

まとめると、u-charts プラグインは、Uniapp フレームワークで簡単に軌跡チャートを描画し、細かくカスタマイズできる、非常に便利で実用的なプラグインです。

以上がuniapp軌跡チャートの描き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。