チャートを作成して編集する

このチュートリアルでは、最初のチャートを作成して編集し、ダッシュボードに追加する方法を学びます

目的

このチュートリアルでは、最初のチャートを作成して編集し、ダッシュボードに追加する方法を学びます。

チャートコンポーネントを作成して編集する

コンポーネントを追加する

Rides Analytics ダッシュボードに新しいコンポーネントを簡単に追加できます。そのためには、rides-analytics.json の配列 items にこの JSON オブジェクトを追加します。

{
  "type": "panel",
  "id": "rides-holidays-container",
  "sizeX": 37,
  "sizeY": 64,
  "row": 191,
  "col": 38,
  "items": [
    {
      "type": "chart",
      "chart": {
        "id": "chart-6930201",
        "component": "recharts.bar",
        "request": {
          "data": {
            "fields": {
              "avg_rides_per_day_per_station": ["select"]
            }
          },
          "scale": {
            "fields": ["cat_holiday"]
          }
        },
        "options": {}
      },
      "sizeX": 100,
      "sizeY": 54,
      "row": 6,
      "col": 0
    },
    {
      "type": "html",
      "content": "Rides variability on Holidays",
      "customclass": "chart-title",
      "sizeX": 100,
      "sizeY": 5,
      "row": 0,
      "col": 0
    }
  ]
}

この JSON は、2 つの項目を含むパネルを定義します。チャート 自体と そのタイトル です。

チャート は、動作するためにリクエストが必要な特別な項目です。チャートコンポーネントが読み込まれると、リクエストが実行され、チャートの種類に応じて結果が異なる方法で表示されます。リクエストの形式は、Analytics Manager のクエリと同じです。Analytics Manager でリクエストを作成し、リクエスト ID をリクエスト自体の代わりに使用することもできます。この場合、上記の JSON で request を requestId に置き換える必要があります。

チャートの種類は、component キーで定義されます。Data Platform には、ネイティブで多くの種類のチャートが利用可能ですが、独自のコンポーネントを作成することもできます。このガイドの次の部分で、その方法を示します。この例では、recharts ライブラリを使用して新しい棒グラフを定義しました。リクエストは、各祝日についての 1 日あたりの平均乗車回数を計算します。

最初は、チャートは次のように表示されます。

チャートをカスタマイズする

このチャートは recharts ライブラリで作成されているため、変更できる多くのプロパティがあります。

Info

完全なリストは、Recharts Bar ドキュメントページにあります。

チャート構成 JSON からこれらのプロパティを渡すには、このチャートに関連する options キーを編集するだけです。例えば、棒のサイズを変更するには、下記のように options に barSize プロパティを追加します。

"options": {
  "barSize": 20
}

また、xAxis または yAxis プロパティを追加して軸をカスタマイズすることもできます。その後、Recharts Axis ドキュメントページで利用可能なプロパティを渡すことができます。例えば、YAxis のドメインとスケールを変更します。

"options": {
  "barSize": 20,
  "yAxis": {
    "domain": [
      2000,
      3800
    ],
    "scale": "linear"
  }
}

これらの変更の後、チャートは次のように表示されます。

チャート構成ファイルに戻り、タイトル構成 を説明するために 1 分間さかのぼりましょう。このコンポーネントは、Data Platform でネイティブで利用可能です。content プロパティで HTML コードを記述できます。これは div でラップされます。customclass プロパティを使用して、この div にカスタムクラスを関連付けることができます。

上記で定義された JSON に関連付けられた HTML コードは次の通りです。

<div class="html chart-title">Rides variability on Holidays</div>

Info

Technical Guide でカスタムチャートについてさらに学びましょう！

動的パラメータを作成して編集する

動的パラメータを使用すると、ユーザーは 1 つ以上のチャートと対話し、リクエストを飛行中に変更できます。

新しい動的パラメータを作成するには、config/menus/sidebar.json を開き、containers オブジェクトに次の JSON オブジェクトを footer 項目の直上に追加します。

  {
    "id": "dyn-weekday",
    "items": [
      {
        "type": "html",
        "content": "Weekday",
        "customclass": "dyn-title"
      },
      {
        "type": "dynamic-parameter",
        "dynamic-parameter": {
          "type": "filter",
          "id": "dynamic-weekday",
          "dictionary": "week_day_label",
          "component": "selectbox",
          "placeholder": "Select Weekday",
          "multi": true
        },
        "style": {
          "paddingBottom": "10px"
        }
      }
    ]
  }

この JSON は、1 つ以上の曜日でチャートリクエストをフィルタリングできる動的パラメータを定義します。

チャートと同じロジックに従います。

ここで、この構成を少し詳しく説明します。

type: この動的パラメータがどのように使用されるかを示します。この場合はフィルタとしてです。これは、この動的パラメータに関連付けられたチャートの結果が、選択された曜日に一致するもののみを表示するようにフィルタリングされることを意味します。
dictionary: この動的パラメータに関連付けられたフィールドを設定します。
component: この動的パラメータが関連付けられたコンポーネントを設定します。ここでは、selectbox コンポーネントです。
id: このオブジェクトをプラットフォーム内で参照するために使用され、一般的にこの動的パラメータをチャートにリンクするために使用されます。
placeholder: selectbox コンポーネントに固有のもので、デフォルトで selectbox 内に表示されるテキストを指定します。
multi: selectbox コンポーネントに固有のもので、true に設定すると複数のオプションを選択できます。

上記の JSON オブジェクトをコピーして貼り付けると、この新しいコンポーネントがサイドバーに表示されます。

この新しく作成した動的パラメータを実際に使用するには、チャートにリンクする必要があります。これを行うには、チャートの構成を編集します。

config/dashboards/rides-analytics.json を開きます。
rides history chart を定義する JSON オブジェクトで、"dynamic-weekday" を動的パラメータ配列に追加します。
ページをリロードします。動的パラメータは現在、rides history chart にリンクされています。
曜日でチャートをフィルタリングするには、日を選択し、新しいデータで更新されるのを見てください。

Info

Technical Guide で動的パラメータについてさらに学びましょう！

既存のコンポーネントの使用方法を学びました。これで、独自のカスタムコンポーネントを作成して、それを使用してユニークな動的パラメータとチャートを作成する準備が整いました！

さらに学ぶ

当社のソリューションを実装するためのトレーニングや技術サポートが必要な場合は、営業担当者にお問い合わせください、またはこのリンクをクリックして見積もりを依頼し、当社の Professional Services 専門家にプロジェクトのカスタム分析を依頼してください。

Data Platform を構築するチームと直接やり取りし、質問をしたり、フィードバックを提供したり、Discord の専用チャネルに参加したりできます。

OVHcloud サービスについてサポートが必要な場合は、ヘルプセンターでリクエストを作成してください。

コミュニティに参加してください。

チャートを作成して編集する#

#目的

#チャートコンポーネントを作成して編集する

#コンポーネントを追加する

#チャートをカスタマイズする

#動的パラメータを作成して編集する

#さらに学ぶ

チャートを作成して編集する

目的

チャートコンポーネントを作成して編集する

コンポーネントを追加する

チャートをカスタマイズする

動的パラメータを作成して編集する

さらに学ぶ