Highcharts 区域图是一种用于表示数据区域的图表类型,通常用于显示变量在一个范围内的趋势。区域图是通过 area 类型的图表来实现的。以下是一个简单的 Highcharts 区域图的示例:
<!-- 引入 Highcharts 库 -->
<script src="https://code.highcharts.com/highcharts.js"></script>

<!-- 创建图表容器 -->
<div id="chart-container" style="width: 100%; height: 400px;"></div>

<!-- 在 body 标签的底部添加以下 JavaScript 代码 -->
<script>
  // 数据
  var data = [1, 3, 2, 5, 4, 7, 6];

  // 配置 Highcharts 区域图
  Highcharts.chart('chart-container', {
    chart: {
      type: 'area' // 图表类型为区域图
    },
    title: {
      text: 'Highcharts 区域图' // 图表标题
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], // x 轴刻度标签
      title: {
        text: 'Months' // x 轴标题
      }
    },
    yAxis: {
      title: {
        text: 'Values' // y 轴标题
      }
    },
    plotOptions: {
      area: {
        fillOpacity: 0.5 // 区域填充透明度
      }
    },
    series: [{
      name: 'Series 1',
      data: data // 数据系列
    }]
  });
</script>

在上述示例中,type 被设置为 'area',这表示这是一个区域图。数据系列 data 是一个数组,表示每个月份对应的数值。plotOptions 中的 area 部分用于配置区域的填充透明度,使得区域图的底部可以显示背景内容。

Highcharts 区域图的特点是在折线图的基础上,将折线以下的区域进行填充,使得图表更具表现力。

你可以根据需要进一步自定义图表,例如添加更多的数据系列、调整颜色和样式、设置工具提示等。请参考[Highcharts 官方文档](https://api.highcharts.com/highcharts)以获取更详细的配置选项和示例。


转载请注明出处:http://www.zyzy.cn/article/detail/5048/Highcharts