2017-06-28 36 views
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> 

答えて

0

は、関数を区別

function randomValue1() { 
    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); 
     } 

    function randomValue() { 
    var value = 40; 
    chart2.arrows[0].setValue(value); 
    chart2.axes[0].setTopText(value + "\n Mbps"); 
    // adjust darker band to new value 
     chart2.axes[0].bands[1].setEndValue(value); 
    } 
関連する問題