如何为仪表添加过渡样式？ (js,css,html)

编程问答 2022-05-15

问题描述

我想改变这个仪表的样式： 添加一些颜色过渡，就像顶部的进度条一样，但我无法让它工作。

你能帮我或指导我举另一个例子吗？

html：

<!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.25);
    border-radius: 6px;
    -webkit-Box-shadow: inset 0 1px 2px rgba(0,0.25),0 1px rgba(255,255,0.08);
    Box-shadow: inset 0 1px 2px rgba(0,0.08);
    }
    
    
    .progress-bar {
    height: 16px;
    border-radius: 4px;
        background-image: -webkit-linear-gradient(top,rgba(255,0.3),0.05));
     background-image: -moz-linear-gradient(top,0.05));
    background-image: -o-linear-gradient(top,0.05));
    background-image: linear-gradient(to bottom,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,inset 0 1px rgba(255,0.1);
    Box-shadow: 0 0 1px 1px rgba(0,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.25);
    }
    
    /*-----TEST----*/
    
        .progress-gauge {
    height: 16px;
    border-radius: 4px;
        attributes.fill.textContent: -webkit-linear-gradient(top,0.05));
     attributes.fill.textContent: -moz-linear-gradient(top,0.05));
    attributes.fill.textContent: -o-linear-gradient(top,0.05));
    attributes.fill.textContent: linear-gradient(to bottom,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.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,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>

lib1、lib2 和 lib3 来自这里：

<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>

此处的示例：https://www.amcharts.com/demos/animated-gauge/ 在这里：https://codepen.io/Thibaut/pen/ouKvy

要发布的详细信息 要发布的详细信息 要发布的详细信息 要发布的详细信息 要发布的详细信息 要发布的详细信息

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

gaugejavascript

相关问答

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其...
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。...
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbc...