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