<分区>
我正在尝试获得一个看起来像仪表的图表。
我已经在为我的其他图表使用 jQuery Flot,那么是否可以使用 Flot 或纯 Javascript?有人可以帮助我开始编写代码吗?
<分区>
我正在尝试获得一个看起来像仪表的图表。
我已经在为我的其他图表使用 jQuery Flot,那么是否可以使用 Flot 或纯 Javascript?有人可以帮助我开始编写代码吗?
最佳答案
这里只使用基础 flot
和背景图片:
// consts
var minCord = {x: -60, y: -57};
var maxCord = {x: 60, y: -60};
var radius = 90;
$(function() {
// some calculations
var startAngle = (6.2831 + Math.atan2(minCord.y, minCord.x));
var endAngle = Math.atan2(maxCord.y, maxCord.x);
var degreesSweep = (-endAngle) + startAngle;
var positionOnArc = function(magnitude){
var numDegrees = degreesSweep * (magnitude/100.0);
var angle = (startAngle - numDegrees);
var posX = radius * Math.cos(angle);
var posY = radius * Math.sin(angle);
return [posX, posY];
}
var options = {
xaxis: {
min: -100,
max: 100,
show: false
},
yaxis: {
min: -100,
max: 100,
show: false
},
grid: {
show: false
}
};
updatePlot = function(){
var data = [[0,0],positionOnArc(Math.random() * 100)];
$('#placeholder').plot([data], options);
setTimeout(updatePlot, 1000);
}
updatePlot();
});
#placeholder
{
background-image:url('http://www.clker.com/cliparts/6/Z/q/9/9/D/gauge-md.png');
width: 300px;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.min.js"></script>
<div id="placeholder"></div>
fiddle here .
关于javascript - Javascript 或 jQuery Flot 中的仪表图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19397394/