Highcharts 区域图学习笔记

什么是 Highcharts 区域图

Highcharts 区域图是一种数据可视化的方式，用于呈现数据随时间变化的趋势。它将数据点连接起来形成一条线，并用颜色填充线和轴之间的区域，以便更清晰地显示数据的范围和变化。

何时使用 Highcharts 区域图

Highcharts 区域图非常适合用于：

• 显示多组数据在相同时间段内的变化趋势；
• 比较两个或多个不同数据系列之间的趋势；
• 强调数据的起伏和周期性波动。

如何创建 Highcharts 区域图

以下是一个简单的 Highcharts 区域图的示例代码：

javascriptCopy Code
Highcharts.chart('container', {
  title: {
    text: 'Monthly Average Temperature'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: {
    title: {
      text: 'Temperature (°C)'
    }
  },
  tooltip: {
    crosshairs: true,
    shared: true
  },
  plotOptions: {
    area: {
      fillColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 0,
          y2: 1
        },
        stops: [
          [0, Highcharts.getOptions().colors[0]],
          [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
        ]
      },
      marker: {
        radius: 2
      },
      lineWidth: 1,
      states: {
        hover: {
          lineWidth: 1
        }
      },
      threshold: null
    }
  },
  series: [{
    type: 'area',
    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]
  }]
});

示例

以下是一个实际的 Highcharts 区域图示例，它显示了三个城市每个月的平均气温。

Copy Code
# Example

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    title: {
        text: 'Average temperature for three cities'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        tickmarkPlacement: 'on',
        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        labels: {
            formatter: function () {
                return this.value;
            }
        },
        gridLineColor: '#efefef'
    },
    tooltip: {
        shared: true,
        valueSuffix: '°C'
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666'
            }
        }
    },
    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],
        marker: {
            symbol: 'circle'
        }
    }, {
        name: 'New York',
        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],
        marker: {
            symbol: 'circle'
        }
    }, {
        name: 'Berlin',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0],
        marker: {
            symbol: 'circle'
        }
    }]
});

以上示例代码可以在 Highcharts 的官方文档中找到，你可以尝试复制以上代码并在你的对应网页中进行运行，以获取更好的感受。

总结

Highcharts 区域图是一种可视化数据的良好方式，可以清晰地展示数据的趋势和范围。通过简单的代码即可轻松创建出高质量的区域图，方便用于各种场景。