因此,我尝试显示多个角度规,一个工作正常,但另一个显示0。
(我更改了div编号)
这是我正在运行的代码...
谢谢 !:)
<script>
var gaugeChart = AmCharts.makeChart( "chartdiv14", {
"type": "gauge",
"theme": "dark",
"axes": [ {
"axisThickness": 1,
"axisAlpha": 0.2,
"tickAlpha": 0.2,
"valueInterval": 20,
"bands": [ {
"color": "#ff0000",
"endValue": 65,
"startValue": 0
}, {
"color": "#f5faf9",
"endValue": 120,
"startValue": 65
}, {
"color": "#84b761",
"endValue": 300,
"innerRadius": "95%",
"startValue": 120
} ],
"bottomText": "0 km/h",
"bottomTextYOffset": -20,
"startValue": -80,
"endValue": 300
} ],
"arrows": [ {} ],
"export": {
"enabled": false
}
} );
setInterval( randomValue, 100 );
// set random value
function randomValue() {
var value3 = Math.round(-4 + Math.random() );
var value4 = -4;
if ( gaugeChart ) {
if ( gaugeChart.arrows ) {
if ( gaugeChart.arrows[ 0 ] ) {
if ( gaugeChart.arrows[ 0 ].setValue ) {
gaugeChart.arrows[ 0 ].setValue( value3 );
gaugeChart.axes[ 0 ].setBottomText( value4 + " subs yesterday" );
}
}
}
}
}
</script>
<script>
var gaugeChart = AmCharts.makeChart( "chartdiv13", {
"type": "gauge",
"theme": "dark",
"axes": [ {
"axisThickness": 1,
"axisAlpha": 0.2,
"tickAlpha": 0.2,
"valueInterval": 20,
"bands": [ {
"color": "#ff0000",
"endValue": 65,
"startValue": 0
}, {
"color": "#f5faf9",
"endValue": 120,
"startValue": 65
}, {
"color": "#84b761",
"endValue": 300,
"innerRadius": "95%",
"startValue": 120
} ],
"bottomText": "0 km/h",
"bottomTextYOffset": -20,
"endValue": 300
}
],
"arrows": [ {} ],
"export": {
"enabled": false
}
} );
setInterval( randomValue2, 100 );
// set random value
function randomValue2() {
var value1 = Math.round(53 + Math.random() );
var value2 = 53;
if ( gaugeChart ) {
if ( gaugeChart.arrows ) {
if ( gaugeChart.arrows[ 0 ] ) {
if ( gaugeChart.arrows[ 0 ].setValue ) {
gaugeChart.arrows[ 0 ].setValue( value1 );
gaugeChart.axes[ 0 ].setBottomText( value2 + " follows yesterday" );
}
}
}
}
}
</script>
我不确定这是数学冲突还是某个地方的语法错误,并且通过删除一个而开始工作...
您需要在第二个量表中更改变量,并在关联的随机函数中进行更改。现在,您正在使用gaugeChart
AmCharts.makeChart中的两个返回值,因此正在使用第二个图表。
var gaugeChart = AmCharts.makeChart("chartdiv14", {
// stuff
});
function randomValue() {
// ...
// variable references should point to gaugeChart
}
// change the name of this variable for this chart
var gaugeChart2 = AmCharts.makeChart("chartdiv13", {
// stuff
});
function randomValue2() {
// ...
// change references to gaugeChart to gaugeChart2 or whatever name you gave it earlier
}
演示:
var gaugeChart = AmCharts.makeChart( "chartdiv14", {
"type": "gauge",
"theme": "dark",
"axes": [ {
"axisThickness": 1,
"axisAlpha": 0.2,
"tickAlpha": 0.2,
"valueInterval": 20,
"bands": [ {
"color": "#ff0000",
"endValue": 65,
"startValue": 0
}, {
"color": "#f5faf9",
"endValue": 120,
"startValue": 65
}, {
"color": "#84b761",
"endValue": 300,
"innerRadius": "95%",
"startValue": 120
} ],
"bottomText": "0 km/h",
"bottomTextYOffset": -20,
"startValue": -80,
"endValue": 300
} ],
"arrows": [ {} ],
"export": {
"enabled": false
}
} );
setInterval( randomValue, 100 ); //consider setting the values directly in the chart if the value/text is meant to be static instead of calling this every tenth of a second.
// set random value
function randomValue() {
var value3 = Math.round(-4 + Math.random() ); //will always return -4 or -3. Consider removing the random part
var value4 = -4;
if ( gaugeChart ) {
if ( gaugeChart.arrows ) {
if ( gaugeChart.arrows[ 0 ] ) {
if ( gaugeChart.arrows[ 0 ].setValue ) {
gaugeChart.arrows[ 0 ].setValue( value3 );
gaugeChart.axes[ 0 ].setBottomText( value4 + " subs yesterday" );
}
}
}
}
}
var gaugeChart2 = AmCharts.makeChart( "chartdiv13", {
"type": "gauge",
"theme": "dark",
"axes": [ {
"axisThickness": 1,
"axisAlpha": 0.2,
"tickAlpha": 0.2,
"valueInterval": 20,
"bands": [ {
"color": "#ff0000",
"endValue": 65,
"startValue": 0
}, {
"color": "#f5faf9",
"endValue": 120,
"startValue": 65
}, {
"color": "#84b761",
"endValue": 300,
"innerRadius": "95%",
"startValue": 120
} ],
"bottomText": "0 km/h",
"bottomTextYOffset": -20,
"endValue": 300
}
],
"arrows": [ {} ],
"export": {
"enabled": false
}
} );
setInterval( randomValue2, 100 ); //consider setting the values directly in the chart if the value/text is meant to be static instead of calling this every tenth of a second.
// set random value
function randomValue2() {
var value1 = Math.round(53 + Math.random() ); //will always return 53 or 54. Consider removing the Math.random part.
var value2 = 53;
if ( gaugeChart2 ) {
if ( gaugeChart2.arrows ) {
if ( gaugeChart2.arrows[ 0 ] ) {
if ( gaugeChart2.arrows[ 0 ].setValue ) {
gaugeChart2.arrows[ 0 ].setValue( value1 );
gaugeChart2.axes[ 0 ].setBottomText( value2 + " follows yesterday" );
}
}
}
}
}
#chartdiv14, #chartdiv13 {
float: left;
width: 40%;
height: 300px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/gauge.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv14"></div>
<div id="chartdiv13"></div>
请注意,箭头抖动是由于Math.round(.. + Math.random())
仅返回静态值或静态值+1(即53或54 in randomValue2
)引起的。您可能希望完全删除随机位,并且如果期望的结果使用常数就可以。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句