Highcharts-散点图

简介

Highcharts是一个基于JavaScript的开源图表库，提供丰富的图表和交互式页面组件，适用于各类Web应用程序的可视化数据呈现。本篇文章主要介绍Highcharts的散点图功能。

散点图，也称为散点图表，是以坐标系为基础，使用小圆圈或点的形式来表示数据的一种图表类型，常用于显示两个变量之间的关系，并利用点的位置和大小来表示数量信息。

安装

可以通过以下方式引入Highcharts：

1. CDN方式：使用以下地址可以直接引入Highcharts。可选版本号。

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

2. 下载：https://www.highcharts.com/downloads/

代码示例

Highcharts的散点图可以通过以下代码进行配置：

Highcharts.chart('container', {
  chart: {
    type: 'scatter' // 散点图类型
  },
  title: {
    text: '散点图' // 标题
  },
  xAxis: {
    title: {
      text: 'X轴' // X轴标题
    },
    startOnTick: true,
    endOnTick: true,
    showLastLabel: true
  },
  yAxis: {
    title: {
      text: 'Y轴' // Y轴标题
    }
  },
  legend: {
    enabled: false // 是否显示图例
  },
  plotOptions: {
    scatter: {
      marker: {
        radius: 5, // 点的半径
        states: {
          hover: {
            enabled: true,
            lineColor: 'rgb(100,100,100)' // 鼠标悬浮在点上时的线条颜色
          }
        }
      },
      states: {
        hover: {
          marker: {
            enabled: false
          }
        }
      }
    }
  },
  series: [{
    name: '数据集1',
    color: 'rgba(223, 83, 83, .5)', // 点的颜色
    data: [[0, 0], [1, 1], [2, 2], [3, 3], [4, 4], [5, 5]] // 数据集，每个数据表示一个点的坐标
  }, {
    name: '数据集2',
    color: 'rgba(119, 152, 191, .5)',
    data: [[1, 0], [2, 1], [3, 2], [4, 3], [5, 4], [6, 5]]
  }]
});

效果展示

以下是使用以上代码生成的散点图的效果展示：

结束语

Highcharts是一个功能强大的开源图表库，提供了许多种类的图表类型供选择，可以灵活地满足各类Web应用程序的可视化数据呈现需求。散点图是其中的一种类型，通过配置文件可以轻松地生成漂亮的散点图表。