2つのゲージを1つのフルサークルで

ここではEChartsを使って1つの回路上に2つのゲージを作成して、画像のように見えるのですか？それとも既に実装されている他のJSライブラリがありますか？ここで2つのゲージを1つのフルサークルで

2017-05-12 ShP

何が必要です。それをカスタマイズしてください。

$(function() { 
 
    $("#gauge").dxBarGauge({ 
 
    startValue: 0, 
 
    endValue: 100, 
 
    values: [47.27, 65.32, 84.59, 71.86], 
 
    label: { 
 
     indent: 30, 
 
     format: { 
 
     type: "fixedPoint", 
 
     precision: 1 
 
     }, 
 
     customizeText: function(arg) { 
 
     return arg.valueText + " %"; 
 
     } 
 
    }, 
 
    "export": { 
 
     enabled: true 
 
    }, 
 
    title: { 
 
     text: "Series' Ratings", 
 
     font: { 
 
     size: 28 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <title>DevExtreme Demo</title> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 
 
    <script src="js/jquery-3.1.0.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.spa.css" /> 
 
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.common.css" /> 
 
    <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.light.css" /> 
 
    <script src="https://cdn3.devexpress.com/jslib/16.2.6/js/dx.all.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
 
    <script src="index.js"></script> 
 
</head> 
 

 
<body class="dx-viewport"> 
 
    <div class="demo-container"> 
 
    <div id="gauge"></div> 
 
    </div> 
 
</body> 
 

 
</html>

参考LIBS：

出典

2017-05-13 05:31:03

Hm、上記の画像のように簡単にカスタマイズすることはできません。 – ShP

2つのゲージを1つのフルサークルで

答えて

関連する問題