How to use Sankey chart to display data in Highcharts

How to use Sankey Diagram to display data in Highcharts

Sankey Diagram is a kind of complex process used to visualize flow, energy, funds, etc. chart type. It can clearly display the relationship and flow between various nodes, and can help us better understand and analyze data. In this article, we will introduce how to use Highcharts to create and customize a Sankey chart, with specific code examples.

First, we need to load the Highcharts library and Sankey module. In the HTML page, you can use the following code to introduce it:

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

Next, we need to define a container to place the chart. You can create a div element in an HTML page and specify a unique id. For example:

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

Then, in JavaScript, we can use the following code to create a Sankey chart:

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}'
    }
  }]
});

In the above code, we first specify the type of chart as sankey . Then, the relationship between data and links is defined in series. Each node is identified by name, and the link is described by source, target, and value. Among them, source represents the starting node, target represents the target node, and value represents the value of the traffic. We can also control the width and spacing of nodes by adjusting nodeWidth and nodePadding, set the color of nodes through colorByPoint, and use tooltip To define the prompt information when the mouse hovers.

Finally, render the chart into the specified container by calling the Highcharts.chart method.

In actual use, the chart can be further customized according to specific needs. For example, you can set the title, axis, color, etc. The following is a more complete sample code:

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}'
    }
  }]
});

In the above code, we set the color of the node through the plotArea attribute, and specify the node's color through the colors attribute. Custom colors. This way, different nodes will have different colors.

Through the above code examples, we can use Sankey charts to display data in Highcharts. I hope this article is helpful to you and can be used in practical applications.

The above is the detailed content of How to use Sankey chart to display data in Highcharts. For more information, please follow other related articles on the PHP Chinese website!