Comments (5)
JS Fiddle:
https://jsfiddle.net/r6Lth6tq/19/
from svg-gauge.
@lutchit I'll look into this. Thanks!
from svg-gauge.
var percentColors = [
{ pct: 0.0, color: { r: 0x00, g: 0xff, b: 0 } },
{ pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
{ pct: 1.0, color: { r: 0xff, g: 0x00, b: 0 } } ];
var getColorForPercentage = function(pct) {
for (var i = 1; i < percentColors.length - 1; i++) {
if (pct < percentColors[i].pct) {
break;
}
}
var lower = percentColors[i - 1];
var upper = percentColors[i];
var range = upper.pct - lower.pct;
var rangePct = (pct - lower.pct) / range;
var pctLower = 1 - rangePct;
var pctUpper = rangePct;
var color = {
r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
};
return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
// or output as hex if preferred
}
$('.gauge-container > .gauge > .value').css('stroke', getColorForPercentage(value2 / 100));
Modify CSS rule:
.gauge-container > .gauge > .value {
stroke: rgb(47, 227, 255);
stroke-width: 20;
fill: rgba(0,0,0,0);
-webkit-transition: stroke 2s ease-out;
-moz-transition: stroke 2s ease-out;
-o-transition: stroke 2s ease-out;
transition: stroke 2s ease-out;
}
from svg-gauge.
Hello @lutchit @wmelton
I've created a new branches with support to change dial color based on values.
Please see the branch: dial-color-chnage
#7
from svg-gauge.
Fixed in commit 22241a7
from svg-gauge.
Related Issues (20)
- Experiencing a ReferenceError: k is not defined (gauge.js) HOT 5
- Animations not working in React HOT 3
- Gauge label transform not working on Safari HOT 3
- CSS for value-text not working HOT 1
- Use in a vue component? HOT 6
- Is it possible to display decimals in labels HOT 1
- Error: <path> attribute d: Expected number, "β¦0 A 40 40 0 1 1 NaN NaN". HOT 5
- Color Text Value
- Add Min/Max labels? HOT 1
- Dynamic setMaxValue HOT 2
- In the old webview, the number display position is wrong HOT 2
- -
- Add TypeScript types HOT 5
- SetMaxValue does not update the label if "this.max" is used in the label HOT 2
- Floating Point Number HOT 1
- function getGauge(myHtmlElement) like. HOT 1
- Gauge is not defined HOT 4
- Changing the direction of animation HOT 4
- Ticks support
- Decimal places and ΒΊC symbol HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svg-gauge.