For AI agents: the complete documentation index is available at https://docs.dataplatform.ovh.net/ja/llms.txt, the full documentation bundle is available at https://docs.dataplatform.ovh.net/ja/llms-full.txt, and this page is available as Markdown at https://docs.dataplatform.ovh.net/ja/sdk/app-charts-jvectormap.md.
  • 🇯🇵 日本語

    • JVectorMap

    Warning

    再作業が保留中で、納期は未定です。 Front App SDK（ReactJS）とFront API SDK（NodeJS）の両方が置き換えられています。このページは現在のリリースをドキュメント化し、置き換えが出荷されるまで正確であり、維持されます。これに対して書かれたコードは引き続き動作します。

    Jvectormapは、ダッシュボードに地図を使用することを可能にするライブラリです。 標準的な実装では、現在、地図を表示し、都市名のスケールで数値を都市ごとに表示することを提供しています。

    公式ライブラリのドキュメント: https://jvectormap.com/

    JVectorMap

    Info

    この記事で言及されているオブジェクトが理解できない場合は、チャート記事を確認してください。

    JSONでのサンプルコード

    以下のサンプルコードは、JVectorMapライブラリを使用するためにアプリケーションダッシュボードに貼り付ける必要があります。

    {
  "type": "chart",
  "col": 0,
  "row": 1,
  "sizeX": 12,
  "sizeY": 20,
  "title": "",
  "chart": {
    "dynamic-parameters": [
      "datepicker"
    ],
    "component": "jvectormap",
    "options": {
      "map": "fr_regions_mill"
    },
    "request": {
      "data": {
        "fields": {
          "qte": [
            "sum"
          ],
          "ca": [
            "sum"
          ]
        }
      },
      "scale": {
        "fields": [
          "city"
        ]
      }
    }
  }
}

    リクエスト

    正しいJVectorMapリクエストを作成するには、2つの条件を満たす必要があります。

    第1条件

    リクエストには少なくとも1つのデータを含める必要があります。前のサンプルのように複数含めることもできます。

    "data": {
  "fields": {
    "qte": [
      "sum"
    ],
    "ca": [
      "sum"
    ]
  }
},

    そのデータは、地図の各ポイント（マーカー）に表示されます。

    JVectorMap

    第2条件

    リクエストには少なくとも1つのスケールを含める必要があります。これはマーカーを計算するために使用されます。

    スケールによって生成された値は、GoogleジオコーディングAPIを通じて送信されます: https://www.npmjs.com/package/geocoding

    値が有効なlat、lng座標を生成する場合、マーカーは関連するデータとともに表示されます。

    "scale": {
  "fields": [
    "city"
  ]
}

    レスポンス

    前の例で正しい回答は次のようになります。

    {
    "scales": {
        "city": "Bordeaux"
    },
    "data": {
        "qte": {
            "sum": [
                {
                    "city": "Bordeaux",
                    "value": 18073
                }
            ]
        },
        "ca": {
            "sum": [
                {
                    "city": "Bordeaux",
                    "value": 190987.45
                }
            ]
        }
    }
},
{ .....

    この回答は、Googleジオコーディングで都市の位置を確認してボルドーにマーカーを表示し、2つの値（sum qteとsum ca）を表示します。

    オプション

    options.map : ユーザーが地図を選択できるようにします。

    すべての地図のリスト

    NameJSON Value
    Worlds, Continentscontinents_mill
    World, Countryworld_mill
    World, Countryworld_mill
    Africa, Countryafrica_mill
    Asia, Countryasia_mill
    Europe, Countryeurope_mill
    North America, Countrynorth_america_mill
    Oceania, Countryoceania_mill
    South America, Countrysouth_america_mill
    Argentinaar_mill
    Australiaau_mill
    Austriaat_mill
    Belgiumbe_mill
    Canadaca_lcc
    Chinacn_mill
    Colombiaco_mill
    Denmarkdk_mill
    France, Departmentsfr_mill
    France, Regionsfr_regions_mill
    France, Regions 2016fr_regions_2016_mill
    Germanyde_mill
    Indiain_mill
    Italy, Provincesit_mill
    Italy, Regionsit_regions_mill
    Netherlandsnl_mill
    New Zelandnz_mill
    Norwayno_mill
    Polandpl_mill
    Portugalpt_mill
    Russia, Federal districtsru_fd_mill
    Russiaru_mill
    South Africaza_mill
    South Koreakr_mill
    Spaines_mill
    Swedense_mill
    Switzerlandch_mill
    Thailandth_mill
    United Kingdom, Regionsuk_regions_mill
    United Kingdomuk_countries_mill
    USAus_aea
    Venezuelave_mill
    Venezuelave_mill
    USA, Chicagous-il-chicago_mill
    USA, New York Cityus-ny-newyork_mill

    さらに詳しく

    もちろん、このライブラリは使用例をいくつか提供します。 しかし、jvectormapはさらに多くの機能を提供します。

    「forepaas/jvectormap/FpJvectormap.jsx」のコードとドキュメントを参照して、独自のチャートコンポーネントを作成し、カスタマイズできます。