0
私は2つのguage amchartを1つのページに表示したいが、コードを修正して2つのチャートを1ページに表示するのは残念だが、アニメーション効果を与えるチャートは1つしかないが2番目のチャートは機能しない...以下this..this私のコードです:2つのamchartを1ページに表示する方法は?
<!-- Styles -->
<style>
#chartdiv1 {
width: 100%;
height:200px;
margin: 0 auto;
background: transparent url(dwn_cent_03.png) no-repeat center 50%;
}
#chartdiv2 {
width: 100%;
height:200px;
margin: 0 auto;
background: transparent url(upload_center_05.png) no-repeat center 50%;
}
</style>
<!-- Resources -->
<script src="../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>
<!-- Chart code -->
<script>
var chart1 = AmCharts.makeChart("chartdiv1", {
"theme": "light",
"type": "gauge",
"axes": [{
"topTextFontSize": 17,
"topTextYOffset": 108,
"topTextColor":"#9797a6",
"color": "#9797a6",
"axisColor": "#9797a6",
"axisThickness": 2,
"endValue": 100,
"gridInside": true,
"inside": true,
"radius": "90%",
"valueInterval": 20,
"tickColor": "#9797a6",
"startAngle": -140,
"endAngle": 140,
"unit": "M",
"bandOutlineAlpha": 0,
"bands": [{
"color": "#d9d9e3",
"endValue": 100,
"innerRadius": "105%",
"radius": "122%",
"gradientRatio": [0, 0, -0.5],
"startValue": 0
}, {
"color": "#63c704",
"endValue": 0,
"innerRadius": "105%",
"radius": "122%",
"gradientRatio": [0.5, 0, -0.5],
"startValue": 0
}]
}],
"arrows": [{
"alpha": 0,
"innerRadius": "0px",
"nailRadius": 0,
"radius": "0%"
}]
});
var chart2 = AmCharts.makeChart("chartdiv2", {
"theme": "light",
"type": "gauge",
"axes": [{
"topTextFontSize": 17,
"topTextYOffset": 108,
"topTextColor":"#9797a6",
"color": "#9797a6",
"axisColor": "#9797a6",
"axisThickness": 2,
"endValue": 100,
"gridInside": true,
"inside": true,
"radius": "90%",
"valueInterval": 20,
"tickColor": "#9797a6",
"startAngle": -140,
"endAngle": 140,
"unit": "M",
"bandOutlineAlpha": 0,
"bands": [{
"color": "#d9d9e3",
"endValue": 100,
"innerRadius": "105%",
"radius": "122%",
"gradientRatio": [0, 0, -0.5],
"startValue": 0
}, {
"color": "#63c704",
"endValue": 0,
"innerRadius": "105%",
"radius": "122%",
"gradientRatio": [0.5, 0, -0.5],
"startValue": 0
}]
}],
"arrows": [{
"alpha": 0,
"innerRadius": "0px",
"nailRadius": 0,
"radius": "0%"
}]
});
setInterval(randomValue, 2000);
// set random value
function randomValue() {
var value = 80;
chart1.arrows[0].setValue(value);
chart1.axes[0].setTopText(value + "\n Mbps");
// adjust darker band to new value
chart1.axes[0].bands[1].setEndValue(value);
}
</script>
<!-- HTML -->
<div id="chartdiv1"></div>
<div id="chartdiv2"></div>