Ticket/InsdepUI/plugin/justgage-1.2.2/examples/customize-style.htm

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!doctype html>

<html>
  <head>
    <title>Customize style</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style>
      body {
        text-align: center;
      }

      #g1, #g2, #g3, #g4, #g5, #g6 {
        width:200px; height:160px;
        display: inline-block;
        margin: 1em;
      }

      p {
        display: block;
        width: 450px;
        margin: 2em auto;
        text-align: left;
      }
    </style>

	</head>
  <body>
    <div id="g1"></div>
    <div id="g2"></div>
    <div id="g3"></div>
    <div id="g4"></div>
    <div id="g5"></div>
    <div id="g6"></div>
    <p>
      Not digging default style? Then mock your own, Picasso! JustGage features bunch of styling options including gauge width, gauge color and shadow, gauge level colors, colors for title, value, min &amp; max etc.
    </p>
    <p>
      Check non-minified version of justgage.js for list of all setup parameters.
    </p>
    <script src="../raphael-2.1.4.min.js"></script>
    <!--<script src="../justgage-1.0.1.js"></script>-->
    <script src="../justgage.js"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function(event) {

      var g1, g2, g3, g4, g5, g6;

      var g1 = new JustGage({
        id: "g1",
        value: getRandomInt(0, 100),
        min: 0,
        max: 100,
        title: "Custom Width",
        label: "",
        gaugeWidthScale: 0.2
      });

      var g2 = new JustGage({
        id: "g2",