仪表 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 in your axis and radius and innerRadius in your bands to take up more room. You'll also need to adjust the marginTop, marginLeft, marginRight, and 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>

仪表 amchart 中的宽度问题

Width issue in gauge amchart

amcharts