Highcharts を使用して長方形ツリーチャートを作成する方法-jsチュートリアル-php.cn

Highcharts を使用して長方形ツリーチャートを作成する方法

WBOY

リリース： 2023-12-18 08:25:22

オリジナル

771 人が閲覧しました

Highcharts を使用して長方形ツリーチャートを作成する方法

Highcharts は、使用できる豊富な種類のグラフを提供する人気のある JavaScript グラフライブラリです。その 1 つは長方形ツリー図で、これを使用すると階層データを視覚的に表示できます。この記事では、Highcharts を使用して長方形ツリーチャートを作成する方法を紹介し、具体的なコード例を示します。

ステップ 1: Highcharts のインストールと導入

まず、Highcharts ライブラリファイルを Highcharts 公式 Web サイトからダウンロードし、プロジェクトに導入する必要があります。次の 2 つの方法で入手できます。

Highcharts ライブラリファイルをダウンロードして HTML ファイルに導入します
npm 経由で Highcharts をインストールし、プロジェクトに導入します

以下は、サンプル HTML ファイルに Highcharts ライブラリを導入するコードです:

<!DOCTYPE html>
<html>
<head>
  <title>矩形树图表示例</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
  <div id="container"></div>
</body>
</html>

ログイン後にコピー

ステップ 2: データを準備する

長方形ツリーチャートを作成する前に、次のことを行う必要があります。階層構造データを用意します。長方形ツリーチャートのデータ形式はオブジェクトの入れ子配列であり、各オブジェクトには name (ノード名) 属性と value (ノード値) 属性、および Children 属性 (子ノードを含む配列) が含まれます。以下はサンプルデータです:

var data = {
  name: '根节点',
  value: 10,
  children: [
    {
      name: '子节点1',
      value: 5,
      children: []
    },
    {
      name: '子节点2',
      value: 3,
      children: [
        {
          name: '子节点2.1',
          value: 2,
          children: []
        },
        {
          name: '子节点2.2',
          value: 1,
          children: []
        }
      ]
    },
    {
      name: '子节点3',
      value: 2,
      children: []
    }
  ]
};

ログイン後にコピー

ステップ 3: 長方形ツリーチャートを作成する

次に、Highcharts の chart メソッドを使用して長方形ツリーチャートを作成できます。。 chart メソッドでは、グラフのタイプを rectangularTree として指定し、タイトルやデータなどのその他の必要な属性を設定する必要があります。

以下は、長方形ツリーチャートを作成するコード例です:

Highcharts.chart('container', {
  chart: {
    type: 'rectangularTree'
  },
  title: {
    text: '矩形树图表示例'
  },
  series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    allowDrillToNode: true,
    levelIsConstant: false,
    data: [data]
  }]
});

ログイン後にコピー

上記のコードでは、チャートタイプを rectangularTree として指定し、タイトルを # に設定しました。 # #長方形ツリーチャートの例。次に、treemap シリーズが series 属性で定義され、レイアウトアルゴリズムが squarified に設定され、ノードをクリックしてドリルできるようになり、データは準備されたデータ[データ]に設定されます。

ステップ 4: ブラウザでプレビュー

最後に、HTML ファイルをブラウザでプレビューすると、生成された長方形ツリーチャートが表示されます。チャートはデータの階層構造に基づいて自動的に四角形を描画し、ノードをクリックすると展開したり折りたたんだりできます。

上記の手順により、Highcharts を使用して長方形のツリーチャートを作成し、具体的なコード例を示しました。必要に応じてレイアウトアルゴリズム、スタイル、その他の属性を調整し、独自のデータに基づいて必要な長方形ツリーチャートを生成できます。 Highcharts は、よりカスタマイズされた効果を実現するのに役立つ豊富な構成オプションを提供します。この記事が、Highcharts を使用して長方形ツリーチャートを作成するのに役立つことを願っています。

以上がHighcharts を使用して長方形ツリーチャートを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。