Sankey 차트를 사용하여 Highcharts에 데이터를 표시하는 방법-JS 튜토리얼-php.cn

Sankey 차트를 사용하여 Highcharts에 데이터를 표시하는 방법

王林

풀어 주다： 2023-12-17 16:41:21

원래의

1063명이 탐색했습니다.

Sankey 차트를 사용하여 Highcharts에 데이터를 표시하는 방법

Sankey 다이어그램을 사용하여 Highcharts에 데이터를 표시하는 방법

Sankey 다이어그램은 흐름, 에너지, 자금과 같은 복잡한 프로세스를 시각화하는 데 사용되는 차트 유형입니다. 다양한 노드 간의 관계와 흐름을 명확하게 표시할 수 있으며, 데이터를 더 잘 이해하고 분석하는 데 도움이 될 수 있습니다. 이 기사에서는 구체적인 코드 예제와 함께 Highcharts를 사용하여 Sankey 차트를 만들고 사용자 정의하는 방법을 소개합니다.

먼저 Highcharts 라이브러리와 Sankey 모듈을 로드해야 합니다. HTML 페이지에서는 다음 코드를 사용하여 도입할 수 있습니다.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>

로그인 후 복사

다음으로 차트를 배치할 컨테이너를 정의해야 합니다. HTML 페이지에 div 요소를 생성하고 고유한 id를 지정할 수 있습니다. 예: div元素，并指定一个唯一的id。例如：

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

로그인 후 복사

然后，在JavaScript中，我们可以使用如下代码来创建一个Sankey图表：

Highcharts.chart('container', {
  chart: {
    type: 'sankey'
  },
  title: {
    text: '数据流动示例'
  },
  series: [{
    data: [{
      name: '节点1'
    }, {
      name: '节点2'
    }, {
      name: '节点3'
    }],
    links: [{
      source: '节点1',
      target: '节点2',
      value: 10
    }, {
      source: '节点1',
      target: '节点3',
      value: 5
    }, {
      source: '节点2',
      target: '节点3',
      value: 3
    }],
    nodeWidth: 30,
    nodePadding: 10,
    colorByPoint: true,
    tooltip: {
      pointFormat: '<b>{point.name}</b>: {point.value}'
    }
  }]
});

로그인 후 복사

在上述代码中，我们首先指定了图表的类型为sankey。然后，在series中定义了数据和链接的关系。每个节点通过name来标识，而链接则由source、target和value来描述。其中，source表示起始节点，target表示目标节点，value表示流量的数值。我们还可以通过调整nodeWidth和nodePadding来控制节点的宽度和间距，通过colorByPoint来设置节点的颜色，通过tooltip来定义鼠标悬停时的提示信息。

最后，通过调用Highcharts.chart方法，将图表渲染到指定的容器中。

在实际使用中，可以根据具体的需求对图表进行进一步定制。例如，可以设置标题、坐标轴、颜色等。以下是一个更完整的示例代码：

Highcharts.chart('container', {
  chart: {
    type: 'sankey'
  },
  title: {
    text: '数据流动示例'
  },
  plotArea: {
    colorByPoint: true
  },
  series: [{
    data: [{
      name: '节点1'
    }, {
      name: '节点2'
    }, {
      name: '节点3'
    }],
    links: [{
      source: '节点1',
      target: '节点2',
      value: 10
    }, {
      source: '节点1',
      target: '节点3',
      value: 5
    }, {
      source: '节点2',
      target: '节点3',
      value: 3
    }],
    nodeWidth: 30,
    nodePadding: 10,
    colors: ['#7cb5ec', '#2f7ed8', '#434348'],
    tooltip: {
      pointFormat: '<b>{point.name}</b>: {point.value}'
    }
  }]
});

로그인 후 복사

在上述代码中，我们通过plotArea属性设置了节点的颜色，通过colorsrrreee

그런 다음 JavaScript에서 다음 코드를 사용하여 Sankey 차트를 만들 수 있습니다.

rrreee

위 코드에서는 먼저 차트 유형을 sankey로 지정합니다. 그러면 데이터와 링크의 관계가 시리즈에 정의됩니다. 각 노드는 이름으로 식별되고 링크는 소스, 대상 및 값으로 설명됩니다. 그 중 source는 시작 노드, target은 대상 노드, value는 트래픽 값을 나타냅니다. 또한 nodeWidth 및 nodePadding을 조정하여 노드의 너비와 간격을 제어하고, colorByPoint를 통해 노드 색상을 설정하고, 를 사용할 수 있습니다. 툴팁 을 사용하여 마우스를 가리키면 프롬프트 정보를 정의할 수 있습니다. 🎜🎜마지막으로 Highcharts.chart 메서드를 호출하여 차트를 지정된 컨테이너에 렌더링합니다. 🎜🎜실제 사용 시 특정 요구 사항에 따라 차트를 추가로 맞춤 설정할 수 있습니다. 예를 들어 제목, 축, 색상 등을 설정할 수 있습니다. 다음은 보다 완전한 예제 코드입니다. 🎜rrreee🎜위 코드에서는 plotArea 속성을 통해 노드의 색상을 설정하고

colors를 통해 노드의 사용자 정의를 지정합니다. 코드> 속성 색상. 이렇게 하면 노드마다 색상이 달라집니다. 🎜🎜위 코드 예제에서는 Sankey 차트를 사용하여 Highcharts에 데이터를 표시할 수 있습니다. 이 글이 여러분에게 도움이 되기를 바라며, 실제 적용에 활용되길 바랍니다. 🎜

위 내용은 Sankey 차트를 사용하여 Highcharts에 데이터를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!