Highcharts 是一个用于创建交互式图表的 JavaScript 库。如果你想要创建一个测量图（Gauge Chart），可以使用 Highcharts 提供的 gauge 类型。以下是一个简单的 Highcharts 测量图的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Highcharts 测量图</title>
  <!-- 引入 Highcharts 库 -->
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <!-- 如果需要使用 Highcharts 的主题样式，可以引入对应的主题文件 -->
  <!-- <script src="https://code.highcharts.com/themes/dark-unica.js"></script> -->
</head>
<body>

<!-- 在这里创建一个容器用于放置图表 -->
<div id="container" style="width: 300px; height: 200px;"></div>

<script>
// 使用 Highcharts 创建测量图
Highcharts.chart('container', {
  chart: {
    type: 'gauge',
    // 如果需要使用主题样式，可以在这里指定主题
    // renderTo: 'container',
    // plotBackgroundColor: null,
    // plotBackgroundImage: null,
    // plotBorderWidth: 0,
    // plotShadow: false
  },

  title: {
    text: '测量图标题'
  },

  pane: {
    startAngle: -150,
    endAngle: 150,
    background: [{
      // 背景底板
      backgroundColor: {
        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
        stops: [
          [0, '#FFF'],
          [1, '#333']
        ]
      },
      borderWidth: 0,
      outerRadius: '109%'
    }, {
      // 刻度尺
      backgroundColor: {
        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
        stops: [
          [0, '#333'],
          [1, '#FFF']
        ]
      },
      borderWidth: 1,
      outerRadius: '107%'
    }, {
      // 轴线
      backgroundColor: '#DDD',
      borderWidth: 0,
      outerRadius: '105%',
      innerRadius: '103%'
    }]
  },

  // 将数据放入 series 中
  series: [{
    data: [80], // 这里是测量值
    // 这里可以设置一些样式，例如刻度尺的最小值、最大值、单位等
    yAxis: {
      min: 0,
      max: 100,
      title: {
        text: '测量单位'
      }
    }
  }]
});
</script>

</body>
</html>

请注意，上述代码中的 data: [80] 部分表示测量值，你可以根据实际情况修改这个值。此外，通过调整相关配置，你可以自定义测量图的外观和样式。


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