---

Highcharts 曲线图技术文档

Highcharts 是一款优秀的数据可视化工具，它支持多种类型的图表，包括曲线图。本文将介绍如何使用 Highcharts 制作曲线图。

准备工作

在开始制作曲线图之前，需要准备一些必要的工具和资源，包括：

• Highcharts 的 JavaScript 库文件
• 数据集
• 一个容器用于显示图表，比如 div 元素

在页面中引入 Highcharts 的 JavaScript 库文件，并在容器元素里添加一个 ID，以备后续使用。例如：

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

定义曲线图结构

接下来，需要定义曲线图的结构。Highcharts 提供了一个 non-scalar x-axis 的选项，用于支持时间轴和类别轴。可以根据数据集的特点选择适合的轴类型，并在定义时通过 options 对象设置相应的参数。例如，用以下代码设置时间轴：

options = {
  xAxis: {
    type: 'datetime'
  },
  series: [{
    data: data
  }]
};

series 是一个数组，用于设置曲线图的系列。每个系列都包含一个 data 数组，表示该系列的数据点。根据需要可以添加多个系列，每个系列可以有自己的数据点。

添加数据点

数据点包括 x 轴和 y 轴坐标。对于曲线图，数据点的 x 轴坐标通常表示时间、年份或者类别等离散的取值。因此可以将 x 轴坐标定义为字符串、时间戳或者日期类型，Highcharts 支持多种格式的时间轴和类别轴。

数据点的 y 轴坐标表示数值。同样可以根据数据集的特点进行定义，可以使用数字、小数或者百分数等类型的格式。例如：

data = [
  [Date.UTC(2010, 0, 1), 29.9],
  [Date.UTC(2010, 0, 2), 71.5],
  [Date.UTC(2010, 0, 3), 106.4]
];

其中 Date.UTC() 是一个用于创建日期对象的方法，通过传入年份、月份和日等参数来创建指定日期的时间戳。在这个例子中，x 轴坐标使用了时间轴，通过 Date.UTC() 方法创建了三个时间戳。Y 轴坐标则是一个数值类型的数组。

生成曲线图

在上述定义完成后，只需要调用 Highcharts.chart() 方法，并传入 options 和容器元素的 ID，即可生成曲线图。例如：

Highcharts.chart('container', options);

曲线图定制

Highcharts 提供了丰富的选项用于定制曲线图。比如可以设置曲线图的主题、背景颜色、边框样式、坐标轴标签、图例等。这些选项一般都是以一个对象的方式进行设置，并在 options 对象中定义。例如：

options = {
  chart: {
    backgroundColor: '#F1F1F1',
    plotBorderColor: '#606063'
  },
  title: {
    text: 'Monthly Average Temperature',
    style: {
      color: '#E0E0E3',
      fontSize: '20px'
    }
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: {
    title: {
      text: 'Temperature (°C)',
      style: {
        color: '#E0E0E3'
      }
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle',
    borderWidth: 0
  },
  series: [{
    name: 'Tokyo',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 
      23.3, 18.3, 13.9, 9.6]
  }]
};

以上是一个示例 options 对象，其中定义了曲线图的多个选项。这个 options 对象中主要包含了 chart、title、xAxis、yAxis、legend 和 series 等部分，用于定义曲线图的样式、标题、标签等。

总结

这篇技术文档介绍了如何使用 Highcharts 制作曲线图，包括准备工作、定义曲线图结构、添加数据点、生成曲线图以及曲线图定制等方面。在实际应用中，可以根据需要进行调整和定制，以生成最合适的曲线图。