Highcharts を使用して関係図を作成する方法-jsチュートリアル-php.cn

Highcharts を使用して関係図を作成する方法

王林

リリース： 2023-12-17 13:40:21

オリジナル

1365 人が閲覧しました

Highcharts を使用して関係図を作成する方法

Highcharts を使用して関係グラフを作成する方法

Highcharts は、折れ線グラフや棒グラフなどのさまざまな種類のグラフの作成に使用できる強力な JavaScript グラフライブラリです。、円グラフなど。関係図は、さまざまなエンティティ間の関係を表示する図の一種で、エンティティ間の接続や関連性を直感的に理解するのに役立ちます。この記事では、Highcharts を使用して関係グラフを作成する方法と、具体的なコード例を紹介します。

1. Highcharts 関係グラフの概要
関係グラフは特殊なグラフタイプで、ネットワーク、組織構造、家系図などの複雑な関係ネットワークを表示するのに適しています。関係グラフの中核はノードとエッジです。ノードはエンティティを表し、エッジはエンティティ間の関係を表します。ノードとエッジを組み合わせることで、完全な関係グラフを構築できます。

2. 準備
関係図を作成する前に、Highcharts の関連ファイルを導入する必要があります。 Highcharts JavaScript ファイルとテーマファイルは次の方法で導入できます:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/organization.js"></script>
<link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css">

ログイン後にコピー

3. 基本構造の作成
まず、関係図を表示するための HTML コンテナを作成する必要があります。一意の ID を持つ <div> 要素を HTML に追加できます:

<div id="chart-container"></div>

ログイン後にコピー

次に、JavaScript でその ID を使用してコンテナ要素を取得し、関係図オブジェクトを作成します。

var chart = Highcharts.chart('chart-container', {
    chart: {
        type: 'organization'
    },
    title: {
        text: '关系图表示例'
    },
    series: []
});

ログイン後にコピー

上記のコードでは、グラフの種類を organization として指定し、グラフのタイトルを設定しました。 series プロパティは、グラフ内のデータ系列を定義します。次のステップで特定のデータを追加します。

4. ノードとエッジの追加
関係グラフ内のノードとエッジは、series 属性によって定義されます。ノードとエッジのデータは配列形式で表され、各要素にはノードまたはエッジに関する詳細情報が含まれます。

ノードの定義は次のとおりです:

series: [{
    data: [{
        name: '节点1',
        title: '标题1'
    }, {
        name: '节点2',
        title: '标题2'
    }]
}]

ログイン後にコピー

上記のコードでは、2 つのノードを定義します。各ノードには name 属性と title が含まれます。＃＃＃属性。 name 属性はノードを一意に識別するために使用され、title 属性はノードのタイトルを表示するために使用されます。

エッジの定義は次のとおりです:

series: [{
    data: [{
        name: '节点1',
        title: '标题1'
    }, {
        name: '节点2',
        title: '标题2'
    }],
    nodes: [{
        from: '节点1',
        to: '节点2',
        color: 'red'
    }]
}]

ログイン後にコピー

上記のコードでは、

nodes 属性を使用してエッジを定義します。 from 属性はエッジの開始ノードを指定するために使用され、to 属性はエッジのターゲットノードを指定するために使用され、color 属性はエッジの開始ノードを指定するために使用されます。エッジの色を指定するために使用されます。

5. 完全なサンプルコード

以下は関係グラフの完全なサンプルコードです:





    
    关系图表示例
    




    <div id="chart-container"></div>

    
    

    <script>
        var chart = Highcharts.chart('chart-container', {
            chart: {
                type: 'organization'
            },
            title: {
                text: '关系图表示例'
            },
            series: [{
                data: [{
                    name: '节点1',
                    title: '标题1'
                }, {
                    name: '节点2',
                    title: '标题2'
                }],
                nodes: [{
                    from: '节点1',
                    to: '节点2',
                    color: 'red'
                }]
            }]
        });
    </script>

ログイン後にコピー

6. 概要

この記事では、ハイチャートを使用して次のことを行う方法の手順を紹介します。関係図を作成し、具体的なコード例が提供されます。ノードとエッジのデータを適切に定義することで、優れた視覚効果を備えた関係図を簡単に作成できます。この記事があなたのお役に立てれば幸いです、読んでいただきありがとうございます!

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