Highcharts를 사용하여 관계 차트를 만드는 방법

Highcharts를 사용하여 관계 차트를 만드는 방법

Highcharts는 꺾은선형 차트, 막대형 차트, 원형 차트 등 다양한 차트 유형을 만드는 데 사용할 수 있는 강력한 JavaScript 차트 라이브러리입니다. 관계 다이어그램은 서로 다른 엔터티 간의 관계를 표시하는 일종의 다이어그램으로 엔터티 간의 연결 및 연관성을 직관적으로 이해하는 데 도움이 됩니다. 이 기사에서는 Highcharts를 사용하여 관계 차트를 만드는 방법을 소개하고 특정 코드 예제를 제공합니다.

1. Highcharts 관계 차트 소개
관계 차트는 네트워크, 조직 구조, 가계도와 같은 복잡한 관계 네트워크를 표시하는 데 적합한 특수 차트 유형입니다. 관계형 그래프의 핵심은 노드(Node)와 엣지(Edge)입니다. 노드는 엔터티를 나타내고 가장자리는 엔터티 간의 관계를 나타냅니다. 노드와 에지의 조합을 통해 완전한 관계 그래프를 구성할 수 있습니다.

2. 준비
관계도를 만들기 전에 하이차트 관련 파일을 소개해야 합니다. 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로 컨테이너를 만들어야 합니다. HTML에 고유 ID가 있는 <div> 요소를 추가할 수 있습니다: <code><div>元素：<pre class='brush:php;toolbar:false;'>&lt;div id=&quot;chart-container&quot;&gt;&lt;/div&gt;</pre><p>然后，我们可以在JavaScript中使用该ID来获取容器元素，并创建关系图表对象：</p><pre class='brush:php;toolbar:false;'>var chart = Highcharts.chart('chart-container', { chart: { type: 'organization' }, title: { text: '关系图表示例' }, series: [] });</pre><p>在上述代码中，我们指定了图表的类型为<code>organization，并设置了图表的标题。series属性定义了图表中的数据系列。我们将在接下来的步骤中添加具体的数据。

四、添加节点和边
关系图表中的节点和边都是通过series属性来定义。节点和边的数据使用数组形式表示，每个元素包含节点或边的详细信息。

节点的定义如下所示：

series: [{
    data: [{
        name: '节点1',
        title: '标题1'
    }, {
        name: '节点2',
        title: '标题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

    
    
    



    <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>

그런 다음 JavaScript에서 해당 ID를 사용하여 컨테이너 요소를 가져오고 관계 다이어그램 객체를 생성할 수 있습니다:

rrreee
In 위 코드에서는 차트 유형을 organization으로 지정하고 차트 제목을 설정했습니다. series 속성은 차트의 데이터 계열을 정의합니다. 다음 단계에서 특정 데이터를 추가하겠습니다.

4. 노드 및 에지 추가
관계형 그래프의 노드 및 에지는 series 속성을 ​​통해 정의됩니다. Node와 Edge 데이터는 배열 형태로 표현되며, 각 요소에는 Node나 Edge에 대한 자세한 정보가 포함되어 있습니다.

🎜노드의 정의는 다음과 같습니다. 🎜rrreee🎜위 코드에서는 두 개의 노드를 정의합니다. 각 노드에는 name 속성과 title 속성이 포함됩니다. name 속성은 노드를 고유하게 식별하는 데 사용되며, title 속성은 노드의 제목을 표시하는 데 사용됩니다. 🎜🎜Edge의 정의는 다음과 같습니다. 🎜rrreee🎜위 코드에서는 nodes 속성을 ​​사용하여 Edge를 정의합니다. from 속성은 가장자리의 시작 노드를 지정하는 데 사용되며 to 속성은 가장자리의 대상 노드를 지정하는 데 사용되며 color code> 속성은 가장자리의 색상을 지정하는 데 사용됩니다. 🎜🎜 5. 전체 샘플 코드 🎜 다음은 관계 차트의 전체 샘플 코드입니다. 🎜rrreee 🎜 6. 요약 🎜 이 문서에서는 Highcharts를 사용하여 관계 차트를 만드는 단계를 소개하고 구체적인 코드 예제를 제공합니다. 노드와 에지 데이터를 적절하게 정의함으로써 시각적 효과가 좋은 관계 다이어그램을 쉽게 만들 수 있습니다. 이 글이 도움이 되셨으면 좋겠습니다. 읽어주셔서 감사합니다! 🎜