Javascript 如何将过渡样式添加到仪表？（js、css、html）
我想更改此仪表的样式： 添加一些颜色转换，就像顶部的进度条一样，但我无法让它工作 你能帮我或者给我介绍另一个例子吗 html:Javascript 如何将过渡样式添加到仪表？（js、css、html）,javascript,gauge,Javascript,Gauge,我想更改此仪表的样式： 添加一些颜色转换，就像顶部的进度条一样，但我无法让它工作 你能帮我或者给我介绍另一个例子吗 html: /*#3cabff celeste*/ /*#67b7dc赛莱斯特rgb（103183220）*/ /*#6771dc科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩*/ #沙特迪夫{ 宽度：100%； 高度：500px； } 身体{
/*#3cabff celeste*/
/*#67b7dc赛莱斯特rgb（103183220）*/
/*#6771dc科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩科摩*/
#沙特迪夫{
宽度：100%；
高度：500px；
}
身体{
字体：13px/20px“Lucida Grande”，塔荷马，Verdana，无衬线；
颜色：#404040；
/*背景：黑色*/
}
.集装箱{
保证金：60像素自动；
宽度：400px；
文本对齐：居中；
}
.集装箱.进展{
保证金：0自动；
宽度：400px；
}
.进展{
填充：4px；
背景：rgba（0,0,0,0.25）；
边界半径：6px；
-webkit盒阴影：插入0 1px2pRGBA（0,0,0,0.25），0 1pxRGBA（255,255,0.08）；
框阴影：插入0 1px2pRGBA（0,0,0,0.25），0 1pxRGBA（255,255,0.08）；
}
.进度条{
高度：16px；
边界半径：4px；
背景图像：-webkit线性渐变（顶部，rgba（255，255，255，0.3），rgba（255，255，255，0.05））；
背景图像：-moz线性渐变（顶部，rgba（255，255，255，0.3），rgba（255，255，255，0.05））；
背景图像：-o-线性梯度（顶部，rgba（255，255，255，0.3），rgba（255，255，255，0.05））；
背景图像：线性渐变（到底部，rgba（255，255，255，0.3），rgba（255，255，255，0.05））；
-webkit转换：0.4s线性；
-moz跃迁：0.4s线性；
-o过渡：0.4s线性；
过渡：0.4s线性；
-webkit转换属性：宽度、背景色；
-moz过渡属性：宽度、背景色；
-o-过渡特性：宽度、背景色；
过渡属性：宽度、背景色；
-webkit盒阴影：0 1px 1px rgba（0,0,0,0.25），插入0 1px rgba（255,255,0.1）；
框阴影：0 1px 1px rgba（0,0,0,0.25），插入0 1px rgba（255,255,0.1）*/
}
#五：选中~.progress>。进度条{
宽度：5%；
背景色：#f63a0f；
}
#二十五：选中~.progress>.progress栏{
宽度：25%；
背景色：#f27011；
}
#五十：选中~.progress>。进度条{
宽度：50%；
背景色：#f2b01e；
}
#seventyfive:选中~.progress>.progress栏{
宽度：75%；
背景色：#f2d31b；
}
#一百：选中~.progress>。进度条{
宽度：100%；
背景色：#86e01e；
}
.收音机{
显示：无；
}
.标签{
显示：内联块；
利润率：0.5px20px；
填充：3px8px；
颜色：#aaa；
文本阴影：0 1px黑色；
边界半径：3px；
光标：指针；
}
.收音机：选中+.标签{
颜色：白色；
背景：rgba（0,0,0,0.25）；
}
/*-----试验----*/
.进度表{
高度：16px；
边界半径：4px；
attributes.fill.textContent:-webkit线性渐变（顶部、rgba（255、255、255、0.3）、rgba（255、255、255、0.05））；
attributes.fill.textContent:-moz线性渐变（顶部，rgba（255，255，255，0.3），rgba（255，255，255，0.05））；
attributes.fill.textContent:-o-linear-gradient（顶部，rgba（255，255，255，0.3），rgba（255，255，255，0.05））；
attributes.fill.textContent：线性渐变（到底部，rgba（255，255，255，0.3），rgba（255，255，255，0.05））；
-webkit转换：0.4s线性；
-moz跃迁：0.4s线性；
-o过渡：0.4s线性；
过渡：0.4s线性；
-webkit转换属性：宽度，attributes.fill.textContent；
-moz转换属性：宽度，attributes.fill.textContent；
-o-transition-property:width，attributes.fill.textContent；
转换属性：宽度，attributes.fill.textContent；
-webkit盒阴影：0 1px 1px rgba（0,0,0,0.25），插入0 1px rgba（255,255,0.1）；
框阴影：0 1px 1px rgba（0,0,0,0.25），插入0 1px rgba（255,255,0.1）*/
}
var值=67//奶油联合国全球价值
am4core.ready（函数（）{
//主题开始
am4core.useTheme（am4themes_动画）；
//主题结束
//创建图表
var chart=am4core.create（“chartdiv”，am4charts.GaugeChart）；
chart.innerRadius=AM4核心百分比（82）；
/**
*法向轴
*/
var axis=chart.xAxes.push（新的am4charts.ValueAxis（））；
最小轴=0；
最大轴=100；
axis.stricminmax=真；
axis.renderer.radius=AM4核心百分比（80）；
axis.renderer.inside=true；
axis.renderer.line.strokeOpacity=1；
axis.renderer.ticks.template.disabled=false
axis.renderer.ticks.template.strokeOpacity=1；
axis.renderer.ticks.template.length=10；
axis.renderer.grid.template.disabled=true；
axis.renderer.labels.template.radius=40；
axis.renderer.labels.template.adapter.add（“文本”），函数（文本）{
返回文本+“%”；
})
/**
*范围轴
*/
var colorSet=new am4core.colorSet（）；
var axis2=chart.xAxes.push（新的am4charts.ValueAxis（））；
axis2.min=0；
轴2.max=100；
axis2.stricminmax=true；
axis2.renderer.labels.template.disabled=true；
axis2.renderer.ticks.template.disabled=true；
axis2.renderer.grid.template.disabled=true；
var range0=axis2.axisRanges.create（）；
范围0.0=0；
范围0.endValue=50；
范围0.axisFill.fillOpacity=1；
//range0.axisFill.fill=colorSet.getIndex（0）；
console.log（'TEST'）；
var changeColor0=colorSet.getIndex（0）；
/*
如果（值=6&&value=26&&value=51&&value=76&&value
<!DOCTYPE html>
<html>
<head >
<!--<script src="https://code.jquery.com/jquery-2.2.1.min.js" type="text/javascript"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js" type="text/javascript"></script>-->
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/javascript"></script>-->
<!-- Resources -->
<script src="lib1.js"></script>
<script src="lib2.js"></script>
<script src="lib3.js"></script>
<style>
/*#3cabff celeste*/
/*#67b7dc celeste rgb(103,183,220)*/
/*#6771dc violeta se encuentra como 6771dc -- change to e1e1e1 primaryButtonHover:Object(o.c)("#6771dc")*/
#chartdiv {
width: 100%;
height: 500px;
}
body {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #404040;
/*background: #2a2a2a; BLACK*/
}
.container {
margin: 60px auto;
width: 400px;
text-align: center;
}
.container .progress {
margin: 0 auto;
width: 400px;
}
.progress {
padding: 4px;
background: rgba(0, 0, 0, 0.25);
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar {
height: 16px;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);*/
}
#five:checked ~ .progress > .progress-bar {
width: 5%;
background-color: #f63a0f;
}
#twentyfive:checked ~ .progress > .progress-bar {
width: 25%;
background-color: #f27011;
}
#fifty:checked ~ .progress > .progress-bar {
width: 50%;
background-color: #f2b01e;
}
#seventyfive:checked ~ .progress > .progress-bar {
width: 75%;
background-color: #f2d31b;
}
#onehundred:checked ~ .progress > .progress-bar {
width: 100%;
background-color: #86e01e;
}
.radio {
display: none;
}
.label {
display: inline-block;
margin: 0 5px 20px;
padding: 3px 8px;
color: #aaa;
text-shadow: 0 1px black;
border-radius: 3px;
cursor: pointer;
}
.radio:checked + .label {
color: white;
background: rgba(0, 0, 0, 0.25);
}
/*-----TEST----*/
.progress-gauge {
height: 16px;
border-radius: 4px;
attributes.fill.textContent: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
attributes.fill.textContent: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
attributes.fill.textContent: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
attributes.fill.textContent: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, attributes.fill.textContent;
-moz-transition-property: width, attributes.fill.textContent;
-o-transition-property: width, attributes.fill.textContent;
transition-property: width, attributes.fill.textContent;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);*/
}
</style>
<script>
var value = 67; //CREAMOS UN GLOBAL VALUE
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// create chart
var chart = am4core.create("chartdiv", am4charts.GaugeChart);
chart.innerRadius = am4core.percent(82);
/**
* Normal axis
*/
var axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 100;
axis.strictMinMax = true;
axis.renderer.radius = am4core.percent(80);
axis.renderer.inside = true;
axis.renderer.line.strokeOpacity = 1;
axis.renderer.ticks.template.disabled = false
axis.renderer.ticks.template.strokeOpacity = 1;
axis.renderer.ticks.template.length = 10;
axis.renderer.grid.template.disabled = true;
axis.renderer.labels.template.radius = 40;
axis.renderer.labels.template.adapter.add("text", function(text) {
return text + "%";
})
/**
* Axis for ranges
*/
var colorSet = new am4core.ColorSet();
var axis2 = chart.xAxes.push(new am4charts.ValueAxis());
axis2.min = 0;
axis2.max = 100;
axis2.strictMinMax = true;
axis2.renderer.labels.template.disabled = true;
axis2.renderer.ticks.template.disabled = true;
axis2.renderer.grid.template.disabled = true;
var range0 = axis2.axisRanges.create();
range0.value = 0;
range0.endValue = 50;
range0.axisFill.fillOpacity = 1;
//range0.axisFill.fill = colorSet.getIndex(0);
console.log('TEST');
var changeColor0 = colorSet.getIndex(0);
/*
if(value <= 5){
changeColor0._value = {r: 246,g: 58, b:15};
}
if(value >= 6 && value <= 25){
changeColor0._value = {r: 242,g: 112, b:17};
}
if(value >= 26 && value <= 50){
changeColor0._value = {r: 242,g: 176, b:30};
}
if(value >= 51 && value <= 75){
changeColor0._value = {r: 242,g: 211, b:27};
}
if(value >= 76 && value <= 100){
changeColor0._value = {r: 134,g: 224, b:30};
}*/
//changeColor0._value = {r: 209,g: 209, b:209};
//range0.axisFill.fill = changeColor0;
var range1 = axis2.axisRanges.create();
range1.value = 50;
range1.endValue = 100;
range1.axisFill.fillOpacity = 1;
var changeColor1 = colorSet.getIndex(2); //CAMBIAMOS EL VALOR DEL COLOR DE FONDO ORIGINAL
changeColor1._value = {r: 209,g: 209, b:209};
range1.axisFill.fill = changeColor1;
/**
* Label
*/
var label = chart.radarContainer.createChild(am4core.Label);
label.isMeasured = false;
label.fontSize = 45;
label.x = am4core.percent(50);
label.y = am4core.percent(100);
label.horizontalCenter = "middle";
label.verticalCenter = "bottom";
label.text = "50%";
/**
* Hand
*/
var hand = chart.hands.push(new am4charts.ClockHand());
hand.axis = axis2;
hand.innerRadius = am4core.percent(20);
hand.startWidth = 10;
hand.pin.disabled = true;
hand.value = 0;
hand.events.on("propertychanged", function(ev) {
range0.endValue = ev.target.value;
range1.value = ev.target.value;
label.text = axis2.positionToValue(hand.currentPosition).toFixed(1);
axis2.invalidate();
});
//funcion que asigna el valor:
setInterval(function() {
//var value = Math.round(Math.random() * 100);
var animation = new am4core.Animation(hand, {
property: "value",
to: value
}, 1000, am4core.ease.cubicOut).start();
}, 2000);
}); // end am4core.ready()
window.onload = function(){
var elemG1 = document.getElementById('chartdiv').children[0].children[0].children[1].children[1].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[0].children[1].children[0].children[0].children[4].children[0].children[0].children[0].children[0].children[0].children[0];
elemG1.id='G1';
//elemG1.attributes.fill.textContent='';
document.getElementById('G1').classList.add('progress');
document.getElementById('G1').classList.add('progress-gauge');
if(value <= 5){
//elemG1.style.backgroundColor = '#f63a0f';
document.getElementById('G1').attributes.fill.textContent = '#f63a0f';
};
if(value >= 6 && value <= 25){
//elemG1.style.backgroundColor = '#f27011';
document.getElementById('G1').attributes.fill.textContent = '#f27011';
};
if(value >= 26 && value <= 50){
//elemG1.style.backgroundColor = '#f2b01e';
document.getElementById('G1').attributes.fill.textContent = '#f2b01e';
};
if(value >= 51 && value <= 75){
//elemG1.style.backgroundColor = '#f2d31b';
document.getElementById('G1').attributes.fill.textContent = '#f2d31b';
};
if(value >= 76 && value <= 100){
//elemG1.style.backgroundColor = '#86e01e';
document.getElementById('G1').attributes.fill.textContent = '#86e01e';
};
};
</script>
</head>
<body>
<div class="container">
<input type="radio" class="radio" name="progress" value="five" id="five">
<label for="five" class="label">5%</label>
<input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive" checked>
<label for="twentyfive" class="label">25%</label>
<input type="radio" class="radio" name="progress" value="fifty" id="fifty">
<label for="fifty" class="label">50%</label>
<input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
<label for="seventyfive" class="label">75%</label>
<input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
<label for="onehundred" class="label">100%</label>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<!-- HTML -->
<div id="chartdiv"></div>
</body>
</html>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>