Home > Article > Web Front-end > How to use scatter plots to display data in Highcharts

How to use scatter plots to display data in Highcharts

WBOYOriginal: 2023-12-17 22:30:321002browse

How to use scatter charts to display data in Highcharts

Preface
Highcharts is an open source JavaScript chart library that provides rich chart types and powerful customization functions. Among them, scatter plot is a commonly used data visualization method that can show the relationship between two variables and the distribution of variables. This article will introduce how to use scatter plots to display data in Highcharts and provide specific code examples.

Step 1: Import the Highcharts library file
First, you need to introduce the Highcharts library file into the HTML file. These files can be imported by using CDN, the code is as follows:

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/highcharts@8.2.2/highcharts.js"></script>
</head>
<body>
  <div id="container"></div>
</body>
</html>

Step 2: Prepare data
Before using the scatter plot, you need to prepare a set of data. The data can be a two-dimensional array. Each element contains two values, representing the coordinates of the horizontal axis and the vertical axis. The sample data is as follows:

var data = [
  [1, 5],
  [2, 10],
  [3, 15],
  [4, 20],
  [5, 25]
];

Step 3: Create a scatter plot
Next , use the API of the Highcharts library to create scatter plots. A configuration object needs to be passed in to specify the parameters of the chart. The sample code is as follows:

Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  title: {
    text: '散点图'
  },
  xAxis: {
    title: {
      text: '横轴标题'
    }
  },
  yAxis: {
    title: {
      text: '纵轴标题'
    }
  },
  series: [{
    name: '散点数据',
    data: data
  }]
});

In the above code, we specified the chart type as scatter (scatter chart) and set the title, horizontal axis and vertical axis. The title of the axis. By passing in the data array, we plot the data in a scatter plot.

Step 4: Configure other options
Highcharts provides a wealth of options and configurations that can be used to further customize the style and interaction of charts. The following are some commonly used options:

Color: You can specify the color of the scatter points by setting the color property of the series object.
Size: You can specify the size of the scatter points by setting the marker attribute of the series object.
Label: You can add scatter point labels by setting the dataLabels property of the series object.

Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  title: {
    text: '散点图'
  },
  xAxis: {
    title: {
      text: '横轴标题'
    }
  },
  yAxis: {
    title: {
      text: '纵轴标题'
    }
  },
  series: [{
    name: '散点数据',
    data: data,
    color: 'blue',
    marker: {
      symbol: 'circle',
      radius: 5
    },
    dataLabels: {
      enabled: true,
      format: '{point.y}',
      style: {
        color: 'black'
      }
    }
  }]
});

The above code sets the color of the scatter points to blue, sets the size to a circle with a radius of 5, and adds data labels to the scatter points.

Conclusion
This article introduces how to use scatter plots to display data in Highcharts, and provides specific code examples. By introducing Highcharts library files, preparing data, creating scatter plots, and configuring other options, you can flexibly customize and display data. I hope this article will be helpful to you when drawing scatter plots using Highcharts.

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

JavaScript html 对象

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to create a pyramid chart using HighchartsNext article：How to create a pyramid chart using Highcharts

See more

How to use scatter plots to display data in Highcharts

Related articles