代码之家 › 专栏 › 技术社区 › Smokey Dawson

amCharts更改每列的宽度(categoryAxis)

amcharts charts javascript

Smokey Dawson · 技术社区 · 6 年前

有没有办法设置每列的宽度??这是我到目前为止的一张照片。。

我有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 但这种情况发生了。。

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

编辑

出于某种原因,如果我设置 宽度字段 对于一些随机的东西,我用这样的数字和线条得到了我想要的。。

但很明显,这并没有显示数据

1 回复 | 直到 6 年前

Darlesson 6 年前

您可以设置 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>