highcharts gauge实现能量环图表效果代码-html代码-BFW代码库

highcharts gauge实现能量环图表效果代码

代码语言：html

所属分类：图表

代码描述：highcharts gauge实现能量环图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    #container{
        width:300px;
  
    }
</style>
</head>

<body>
    <!-- partial:index.partial.html -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/highcharts.11.0.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/highcharts-11.0.1.more.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/highcharts.solid-gauge.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/highcharts.11.0.1.exporting.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/highcharts.11.0.1.export-data.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/highcharts.11.0.1.accessibility.js"></script>

    <figure class="highcharts-figure"></figure>
    <div id="container"></div>
    <p class="highcharts-description">
       
    </p>
    </figure>
    <!-- partial -->
    <script >
        // Uncomment to style it like Apple Watch
/*
if (!Highcharts.theme) {
  Highcharts.setOptions({
    chart: {
      backgroundColor: 'black'
    },
    colors: ['#F62366', '#9DFF02', '#0CCDD6'],
    title: {
      style: {
        color: 'silver'
      }
    },
    tooltip: {
      style: {
        color: 'silver'
      }
    }
  });
}
// */

/**
 * In the chart render event, add icons on top of the circular shapes
 */
function renderIcons() {
  // Move icon
  if (!this.series[0].icon) {
    this.series[0].icon = this.renderer
      .path(["M", -8, 0, "L", 8, 0, "M", 0, -8, "L", 8, 0, 0, 8])
      .attr({
        stroke: "#303030",
        "stroke-linecap": "round",
        "stroke-linejoin": "round",
        "stroke-width": 2,
        zIndex: 10
      })
      .add(this.series[2].group);
  }
  this.series[0].icon.translate(
    this.chartWidth / 2 - 10,
    this.plotHeight / 2 -
      this.series[0].points[0].shapeArgs.innerR -
      (this.series[0].points[0].shapeArgs.r -
        this.series[0].points[0].shapeArgs.innerR) /
        2
  );

  // Exercise icon
  if (!this.series[1].icon) {
    this.series[1].icon = this.renderer
      .path([
        "M",
        -8,
        0,
        "L",
        8,
        0,
        "M",
        0,
        -8,
        "L",
        8,
        0,
        0,
        8,
        "M",
        8,
        -8,
        "L",
        16,
        0,
        8,
        8
      ])
      .attr({
        stroke: "#ffffff",
        "stroke-linecap": "round",
        "stroke-linejoin": "round",
        "stroke-width": 2,
        zIndex: 10
      })
      .add(this.series[2].group);
  }
  this.series[1].icon.translate(
    this.chartWidth / 2 - 10,
    this.plotHeight / 2 -
      this.series[1].points[0].shapeArgs.innerR -
      (this.series[1].points[0].shapeArgs.r -
        this.........完整代码请登录后点击上方下载按钮下载查看