Question

我正在使用Amcharts 3版本创建迷你图。这是我的代码

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
#chartdiv {
  width: 100%;
  height: 500px;
  background-color: grey;
}
<script>
AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [
    {
      "value_at_timestamp": 1539176030,
      "value_at": "2018-10-10 12:54:05",
      "value": 118766,
      "precision": 3,
      "display_value": 118.766,
      "updated_at": "2018-10-10 15:09:06",
      "bullet": "round"
    },
    {
      "value_at_timestamp": 1539176945,
      "value_at": "2018-10-10 13:09:05",
      "value": 471954,
      "precision": 3,
      "display_value": 471.954,
      "updated_at": "2018-10-10 15:09:06",
      "bullet": "round"
    },
    {
      "value_at_timestamp": 1539177845,
      "value_at": "2018-10-10 13:24:05",
      "value": 724007,
      "precision": 3,
      "display_value": 724.007,
      "updated_at": "2018-10-10 15:09:06",
      "bullet": "round"
    },
    {
      "value_at_timestamp": 1539178745,
      "value_at": "2018-10-10 13:39:05",
      "value": 632491,
      "precision": 3,
      "display_value": 632.491,
      "updated_at": "2018-10-10 15:09:06",
      "bullet": "round"
    },
    {
      "value_at_timestamp": 1539179645,
      "value_at": "2018-10-10 13:54:05",
      "value": 446953,
      "precision": 3,
      "display_value": 446.953,
      "updated_at": "2018-10-10 15:09:06",
      "bullet": "round"
    },
    {
      "value_at_timestamp": 1539180545,
      "value_at": "2018-10-10 14:09:05",
      "value": 782412,
      "precision": 3,
      "display_value": 782.412,
      "updated_at": "2018-10-10 15:09:05",
      "bullet": "round"
    },
    {
      "value_at_timestamp": 1539181445,
      "value_at": "2018-10-10 14:24:05",
      "value": 346533,
      "precision": 3,
      "display_value": 346.533,
      "updated_at": "2018-10-10 15:09:05",
      "bullet": "round"
    },
    {
      "value_at_timestamp": 1539182345,
      "value_at": "2018-10-10 14:39:05",
      "value": 128011,
      "precision": 3,
      "display_value": 128.011,
      "updated_at": "2018-10-10 15:09:05",
      "bullet": "round"
    },
    {
      "value_at_timestamp": 1539183245,
      "value_at": "2018-10-10 14:54:05",
      "value": 800151,
      "precision": 3,
      "display_value": 800.151,
      "updated_at": "2018-10-10 15:09:05",
      "bullet": "round"
    },
    {
      "value_at_timestamp": 1539184145,
      "value_at": "2018-10-10 15:09:05",
      "value": 668592,
      "precision": 3,
      "display_value": 668.592,
      "updated_at": "2018-10-10 15:09:05",
      "bullet": "round"
    }
  ],
  "categoryField": "value_at",
  "autoMargins": false,
  "marginLeft": 0,
  "marginRight": 0,
  "marginTop": 0,
  "marginBottom": 0,
  "graphs": [
    {
      "id": "g1",
      "valueField": "display_value",
      "bulletField": "bullet",
      "lineColor": "#7c287e",
      "bulletSize": 1,
      "fillAlphas": 0.3
    }
  ],
  "valueAxes": [
    {
      "gridAlpha": 0,
      "axisAlpha": 0
    }
  ],
  "categoryAxis": {
    "gridAlpha": 0,
    "axisAlpha": 0
  },
  "chartCursor": {
    "limitToGraph": "g1"
  }
} );
</script>

实时网址https://codepen.io/anon/pen/VEbzLd

迷你图未采用全宽全灰色区域。我的问题是如何制作迷你图来拉伸整个灰色区域。

感谢您阅读我的问题并为我提供帮助。

Answer 1

默认情况下，类别轴不会在轴的起点和终点绘制点。您可以通过在categoryAxis中将设置为true来覆盖此行为，以使图表在轴的两端绘制点，并占用整个宽度：

"categoryAxis": {
  // ...
  "startOnAxis": true,
  // ...
}

startOnAxis

Amcharts迷你图图表占父div的全角（100％）

1 个答案: