Highcharts 测量图学习笔记

什么是Highcharts？

Highcharts是一款基于JavaScript语言，用于制作交互式图表和测量图的高效工具库。它可以帮助我们快速地创建各种类型的图表，如线性图、区域图、饼图、柱状图、散点图等，并提供了大量的定制选项，可以轻松实现个性化的要求。

基本使用步骤

1. 引入Highcharts库文件

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

2. 创建一个容器元素

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

3. 初始化Highcharts对象并渲染图表

   javascriptCopy Code
   Highcharts.chart('container', {
     chart: {
       type: 'line'
     },
     series: [{
       data: [1, 3, 2, 4, 5, 4, 6, 2]
     }]
   });
   

实例演示

下面给出一个基本的折线图实例：

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

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

<script>
  Highcharts.chart('container', {
    chart: {
      type: 'line'
    },
    title: {
      text: '月平均气温'
    },
    xAxis: {
      categories: ['一月', '二月', '三月', '四月', '五月', '六月',
        '七月', '八月', '九月', '十月', '十一月', '十二月'
      ]
    },
    yAxis: {
      title: {
        text: '温度 (°C)'
      }
    },
    series: [{
      name: '东京',
      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
      ]
    }, {
      name: '纽约',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0,
        24.8, 24.1, 20.1, 14.1, 8.6, 2.5
      ]
    }]
  });
</script>

该例子创建了一个折线图，用于展示东京和纽约每个月的平均气温。图表使用默认的主题和颜色，但是它可以根据需要进行自定义。