代码之家 › 专栏 › 技术社区 › ARIF MAHMUD RANA

Amcharts迷你图采用父div的全宽(100%)

amcharts charts css html javascript

ARIF MAHMUD RANA · 技术社区 · 7 年前

我正在使用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>

实时url https://codepen.io/anon/pen/VEbzLd

迷你图不是全宽全灰色区域。我的问题是如何使迷你图延伸整个灰色区域。

感谢您阅读我的问题;帮助我。

1 回复 | 直到 7 年前

xorspark 7 年前

默认情况下,类别轴不会在轴的最开始和结束处绘制点。可以通过设置 startOnAxis 在你的内心深处 categoryAxis 要使图表绘制轴最末端的点,占据整个宽度:

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

Demo