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>

amCharts改变每列的宽度（categoryAxis）

1 个答案: