ゲージamchartの幅の問題

Question

<div class="row"> 
    <div class="col-md-6"> 
     <div id="mychart"></div>  
    </div> 
    <div class="col-md-6"> 
     <div id="content">Some content here</div> 
    </div> 
</div> 

私は全幅で私のグラフを見せたいです。 下の画像には、幅の狭いチャートが表示されています。私はそれらのいくつかのパディング効果を考える。 余分なパディングを示す矢印を描いています。

Answer 1

あなたの軸のradiusとバンド内のradiusとinnerRadiusの組み合わせを調整して、より多くの部屋を取る必要があります。また、半径が増加したためにmarginTop,marginLeft、marginRight、marginBottomのプロパティを再調整する必要があります。ここで

は例です：

var chart = AmCharts.makeChart("chartdiv", { 
 
    "theme": "light", 
 
    "type": "gauge", 
 
    "marginTop": 0, 
 
    "marginLeft": 50, 
 
    "marginRight": 50, 
 
    "marginBottom": -235, 
 
    "axes": [{ 
 
    "radius": "70%", 
 
    "topTextFontSize": 20, 
 
    "topTextYOffset": 70, 
 
    "axisColor": "#31d6ea", 
 
    "endValue": 100, 
 
    "inside": true, 
 
    "tickColor": "#67b7dc", 
 
    "startAngle": -90, 
 
    "endAngle": 90, 
 
    "unit": "%", 
 
    "bandOutlineAlpha": 0, 
 
    "bands": [{ 
 
     "color": "#0080ff", 
 
     "endValue": 100, 
 
     "innerRadius": "100%", 
 

 
     "radius": "175%", 
 
     "gradientRatio": [0.5, 0, -0.5], 
 
     "startValue": 0 
 
    }, { 
 
     "color": "#3cd3a3", 
 
     "endValue": 0, 
 
     "innerRadius": "100%", 
 
     "radius": "175%", 
 
     "gradientRatio": [0.5, 0, -0.5], 
 
     "startValue": 0 
 
    }] 
 
    }], 
 
    "arrows": [{ 
 
    "alpha": 1, 
 
    "innerRadius": "35%", 
 
    "nailRadius": 0, 
 
    "radius": "110%" 
 
    }] 
 
}); 
 

 
setInterval(randomValue, 2000); 
 

 
// set random value 
 
function randomValue() { 
 
    var value = Math.round(Math.random() * 100); 
 
    chart.arrows[0].setValue(value); 
 
    chart.axes[0].setTopText(value + " %"); 
 
    // adjust darker band to new value 
 
    chart.axes[0].bands[1].setEndValue(value); 
 
}

#chartdiv { 
 
    width: 500px; 
 
    border: 1px solid #800; 
 
    height: 275px; 
 
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/gauge.js"></script> 
 
<div id="chartdiv"></div>