如何用JavaScript绘制折线图教程

Highcharts

335人浏览 · 2026-05-12 06:52:29

Highcharts · 2026-05-12 06:52:29 发布

用JavaScript绘制折线图可以借助Highcharts图表库实现，它是一个功能强大且易用的开源图表库，支持多种使用方式和灵活的配置选项。以下是完整的实现流程：

一、前置准备（三种加载方式）

根据你的项目场景选择合适的Highcharts引入方式：

加载方式	适用场景	代码示例
CDN直接引入	原生HTML项目	<script src="https://code.highcharts.com/highcharts.js"></script>
ES6模块化	现代前端打包项目（Webpack/Vite）	import Chart from 'highcharts/es-modules/Core/Chart/Chart.js'; import LineSeries from 'highcharts/es-modules/Series/Line/LineSeries.js';
React集成	React框架项目	先执行npm install highcharts @highcharts/react，再引入组件

可选增强模块：可以额外引入导出模块（支持下载图表）和无障碍模块，提升用户体验11。

二、基础折线图完整实现

1. 原生HTML+JavaScript示例

<!DOCTYPE html>
<html>
<body>
  <!-- 1. 创建图表容器 -->
  <div id="container" style="width: 80%; height: 400px; margin: 0 auto;"></div>

  <!-- 2. 引入Highcharts库 -->
  <script src="https://code.highcharts.com/highcharts.js"></script>

  <!-- 3. 初始化折线图 -->
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const chartOptions = {
        chart: { type: 'line' }, // 指定图表类型为折线图
        title: { text: '月度销售数据' },
        xAxis: { categories: ['1月', '2月', '3月', '4月', '5月', '6月'] },
        yAxis: { title: { text: '销售额(万元)' } },
        series: [ // 数据系列，支持多个折线
          { name: '产品A', data: [12, 20, 15, 25, 22, 30] },
          { name: '产品B', data: [8, 12, 18, 24, 16, 22] }
        ]
      };
      // 渲染图表到容器
      Highcharts.chart('container', chartOptions);
    });
  </script>
</body>
</html>

2. 异步加载外部数据版本（最佳实践）

推荐先加载数据再初始化图表，避免重复渲染提升性能1：

document.addEventListener('DOMContentLoaded', function () {
  const options = { chart: { type: 'line' }, series: [{}] }; 
  
  Highcharts.ajax({ 
    url: 'data.json', // 外部数据文件
    success: function(data) { 
      options.series[0].data = data; 
      Highcharts.Chart('container', options); 
    } 
  }); 
});

三、常见进阶配置

1. 阶梯折线图

可以代替常规直线连接，展示阶梯式变化：

series: [{
  name: '阶梯折线图',
  data: [1, 3, 2, 4, 5, 4, 6],
  step: 'left' // 可选：left/center/right
}]

2. 自定义线条样式

支持虚线、点线等多种样式：

series: [{
  data: [1, 3, 2, 4, 5],
  dashStyle: 'longdash', // 可选：Solid/ShortDash/ShortDot等
  color: '#2f7ed8'

}]

3. 多区域颜色分区

根据y轴数值区间自动切换折线颜色：

series: [{
  name: '带分区折线图',
  data: [1, 2, 4, 5, 7, 8, 9],
  zoneAxis: 'y',
  zones: [
    { value: 5, color: '#90ed7d' }, // 小于5显示绿色

    { value: 8, color: '#f7a35c' }, // 5-8显示橙色

    { color: '#f45b5b' }            // 大于8显示红色

  ]
}]

亚马逊云科技技术品牌专区

更多推荐

Kiro Editor 开发实战：使用 Cargo 构建、测试与性能优化指南

欢迎来到这篇终极指南，我们将深入探索如何使用Rust构建高性能的终端文本编辑器Kiro Editor。无论你是Rust新手还是经验丰富的开发者，这篇完整教程将带你了解如何利用Cargo工具链进行高效的开发、测试和性能优化，打造一款快速、轻量且功能强大的UTF-8文本编辑器。## 什么是Kiro Editor？Kiro Editor是一款使用Rust编写的极简终端文本编辑器，它最初是著名编辑