javascript - amCharts 更改每列的宽度 (categoryAxis)

Question

有没有办法可以设置每列的宽度？这是我到目前为止所拥有的图片..

我有 12 个点，我想在顶部显示所有 12 个数字，并且我希望线条与数据点相匹配。我已经尝试了所有可以想到的选项，但无法使其工作。我是否缺少某些内容？

我当前的配置是..

{
  'type': 'serial',
  'categoryField': 'category',
  'columnWidth': '0.1',
  'plotAreaBorderColor': '#FFFFFF',
  'fontFamily': 'proxima-nova',
  'colors': [
    '#FFF'
  ],
  'startDuration': 1,
  'accessible': false,
  'addClassNames': true,
  'autoDisplay': true,
  'color': '#FFFFFF',
  'panEventsEnabled': false,
  'categoryAxis': {
    'gridPosition': 'start',
    'startOnAxis': true,
    "autoWrap": true,
    'position': 'top',
    'axisAlpha': 0,
    'axisThickness': 0,
    'color': '#FFFFFF',
    'gridColor': '#E5E5E5',
    'titleColor': '#FFFFFF'
  },
  'trendLines': [],
  'graphs': [
    {
      'balloonText': '[[title]] of [[category]]:[[value]]',
      'bullet': 'round',
      'id': 'AmGraph-1',
      'title': 'graph 1',
      'valueField': 'column-1'
    },
    {
      'balloonText': '[[title]] of [[category]]:[[value]]',
      'bullet': 'square',
      'id': 'AmGraph-2',
      'title': 'graph 2',
      'valueField': 'column-2'
    }
  ],
  'guides': [],
  'valueAxes': [
    {
      'id': 'ValueAxis-1',
      'axisAlpha': 0,
      'color': '#FFFFFF',
      'gridAlpha': 0.12
    }
  ],
  'allLabels': [],
  'balloon': {
    'enabled': false,
  },
  'dataProvider': [
    {
      'category': '1',
      'column-1': 8
    },
    {
      'category': '2',
      'column-1': 6
    },
    {
      'category': '3',
      'column-1': 2
    },
    {
      'category': '4',
      'column-1': 1
    },
    {
      'category': '5',
      'column-1': 2
    },
    {
      'category': '6',
      'column-1': 3
    },
    {
      'category': '7',
      'column-1': 6
    },
    {
      'category': '8',
      'column-1': 12
    },
    {
      'category': '9',
      'column-1': 13
    },
    {
      'category': '10',
      'column-1': 15
    },
    {
      'category': '11',
      'column-1': 17
    },
    {
      'category': '12',
      'column-1': 20
    }
  ]
}

现在我已经尝试过..将widthField设置为category但发生了这种情况..

我只是希望所有空格都是偶数并在顶部显示所有数字..任何帮助将不胜感激!

编辑

出于某种原因，如果我将 widthField 设置为随机值，我会得到我想要的数字和线条，如下所示..

但显然这没有显示数据

Answer 1

您可以设置autoGridCount为 false 并更改 gridCount到12。这提供了网格列的近似数量，这意味着它可能并不总是显示准确的数量，具体取决于不同的因素。

var chart = AmCharts.makeChart("chartdiv", {
  'type': 'serial',
  'categoryField': 'category',
  'columnWidth': '0.1',
  'plotAreaBorderColor': '#FFFFFF',
  'fontFamily': 'proxima-nova',
  'colors': [
    '#FFF'
  ],
  'startDuration': 1,
  'accessible': false,
  'addClassNames': true,
  'autoDisplay': true,
  'color': '#FFFFFF',
  'panEventsEnabled': false,
  'categoryAxis': {
    'gridPosition': 'start',
    'startOnAxis': true,
    "autoWrap": true,
    'position': 'top',
    'axisAlpha': 0,
    'axisThickness': 0,
    'color': '#FFFFFF',
    'gridColor': '#E5E5E5',
    'titleColor': '#FFFFFF',
    'autoGridCount': false,
    'gridCount': 12
  },
  'trendLines': [],
  'graphs': [
    {
      'balloonText': '[[title]] of [[category]]:[[value]]',
      'bullet': 'round',
      'id': 'AmGraph-1',
      'title': 'graph 1',
      'valueField': 'column-1'
    },
    {
      'balloonText': '[[title]] of [[category]]:[[value]]',
      'bullet': 'square',
      'id': 'AmGraph-2',
      'title': 'graph 2',
      'valueField': 'column-2'
    }
  ],
  'guides': [],
  'valueAxes': [
    {
      'id': 'ValueAxis-1',
      'axisAlpha': 0,
      'color': '#FFFFFF',
      'gridAlpha': 0.12
    }
  ],
  'allLabels': [],
  'balloon': {
    'enabled': false,
  },
  'dataProvider': [
    {
      'category': '1',
      'column-1': 8
    },
    {
      'category': '2',
      'column-1': 6
    },
    {
      'category': '3',
      'column-1': 2
    },
    {
      'category': '4',
      'column-1': 1
    },
    {
      'category': '5',
      'column-1': 2
    },
    {
      'category': '6',
      'column-1': 3
    },
    {
      'category': '7',
      'column-1': 6
    },
    {
      'category': '8',
      'column-1': 12
    },
    {
      'category': '9',
      'column-1': 13
    },
    {
      'category': '10',
      'column-1': 15
    },
    {
      'category': '11',
      'column-1': 17
    },
    {
      'category': '12',
      'column-1': 20
    }
  ]
});

#chartdiv {
	width: 400px;
	height: 400px;
	font-size	: 11px;
}

body {
  background-color: #444;
}

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