Question

我希望我的y轴标签有0％，25％，50％，75％，100％

我本来期望一个4或5的gridCount来做，但它拒绝。我已经尝试将labelFrequency设置为25，但这也不起作用。

window.AmCharts.makeChart('chartdiv', {
    'type': 'serial',
    'categoryField': 'category',
    'dataDateFormat': 'YYYY-MM-DD',
    'startDuration': 1,
    'theme': 'light',
    'categoryAxis': {
      'parseDates': true,
      'axisThickness': 0,
      'color': '#989898',
      'gridThickness': 0
    },
    'graphs': [
      {
        'fillAlphas': 1,
        'type': 'column',
        'valueField': 'column-1'
      }
    ],
    'valueAxes': [
      {
        'zeroGridAlpha': -2,
        'titleColor': '#989898',
        'axisThickness': 0,
        'color': '#989898',
        'gridThickness': 1,
        unit: '%',
        autoGridCount: false,
        minimum:0,
        maximum:100,
        gridCount: 5
      }
    ],
    'dataProvider': [
      {
        'category': '2014-03-01',
        'column-1': 8
      },
      {
        'category': '2014-03-02',
        'column-1': 16
      },
      {
        'category': '2014-03-03',
        'column-1': 2
      },
      {
        'category': '2014-03-04',
        'column-1': 7
      },
      {
        'category': '2014-03-05',
        'column-1': 5
      },
      {
        'category': '2014-03-06',
        'column-1': 9
      },
      {
        'category': '2014-03-07',
        'column-1': 4
      },
      {
        'category': '2014-03-08',
        'column-1': 15
      },
      {
        'category': '2014-03-09',
        'column-1': 12
      },
      {
        'category': '2014-03-10',
        'column-1': 17
      },
      {
        'category': '2014-03-11',
        'column-1': 18
      },
      {
        'category': '2014-03-12',
        'column-1': 21
      },
      {
        'category': '2014-03-13',
        'column-1': 24
      },
      {
        'category': '2014-03-14',
        'column-1': 23
      },
      {
        'category': '2014-03-15',
        'column-1': 24
      }
    ]
  })

Answer 1

不幸的是，没有办法通过值轴属性直接设置自己的轴分割。要解决此问题，您可以使用guides禁用值轴标签和网格并设置自己的网格和标签：

  'valueAxes': [{
    'zeroGridAlpha': -2,
    'titleColor': '#989898',
    'axisThickness': 0,
    'color': '#989898',
    'gridThickness': 1,
    minimum: 0,
    maximum: 100,
    gridAlpha: 0,
    tickLength: 0,
    labelsEnabled: false,
    guides: [{
        value: 0,
        label: "0%",
        tickLength: 5,
        lineAlpha: .15
      }, {
        value: 25,
        label: "25%",
        tickLength: 5,
        lineAlpha: .15
      }, {
        value: 50,
        label: "50%",
        tickLength: 5,
        lineAlpha: .15
      }, {
        value: 75,
        label: "75%",
        tickLength: 5,
        lineAlpha: .15
      }, {
        value: 100,
        label: "100%",
        tickLength: 5,
        lineAlpha: .15
      },
    ]
  }],

演示如下：

AmCharts.makeChart('chartdiv', {
  'type': 'serial',
  'categoryField': 'category',
  'dataDateFormat': 'YYYY-MM-DD',
  'startDuration': 1,
  'theme': 'light',
  'categoryAxis': {
    'parseDates': true,
    'axisThickness': 0,
    'color': '#989898',
    'gridThickness': 0
  },
  'graphs': [{
    'fillAlphas': 1,
    'type': 'column',
    'valueField': 'column-1'
  }],
  'valueAxes': [{
    'zeroGridAlpha': -2,
    'titleColor': '#989898',
    'axisThickness': 0,
    'color': '#989898',
    'gridThickness': 1,
    minimum: 0,
    maximum: 100,
    gridAlpha: 0,
    tickLength: 0,
    labelsEnabled: false,
    guides: [{
        value: 0,
        label: "0%",
        tickLength: 5,
        lineAlpha: .15
      }, {
        value: 25,
        label: "25%",
        tickLength: 5,
        lineAlpha: .15
      }, {
        value: 50,
        label: "50%",
        tickLength: 5,
        lineAlpha: .15
      }, {
        value: 75,
        label: "75%",
        tickLength: 5,
        lineAlpha: .15
      }, {
        value: 100,
        label: "100%",
        tickLength: 5,
        lineAlpha: .15
      },

    ]
  }],
  'dataProvider': [{
      'category': '2014-03-01',
      'column-1': 8
    },
    {
      'category': '2014-03-02',
      'column-1': 16
    },
    {
      'category': '2014-03-03',
      'column-1': 2
    },
    {
      'category': '2014-03-04',
      'column-1': 7
    },
    {
      'category': '2014-03-05',
      'column-1': 5
    },
    {
      'category': '2014-03-06',
      'column-1': 9
    },
    {
      'category': '2014-03-07',
      'column-1': 4
    },
    {
      'category': '2014-03-08',
      'column-1': 15
    },
    {
      'category': '2014-03-09',
      'column-1': 12
    },
    {
      'category': '2014-03-10',
      'column-1': 17
    },
    {
      'category': '2014-03-11',
      'column-1': 18
    },
    {
      'category': '2014-03-12',
      'column-1': 21
    },
    {
      'category': '2014-03-13',
      'column-1': 24
    },
    {
      'category': '2014-03-14',
      'column-1': 23
    },
    {
      'category': '2014-03-15',
      'column-1': 24
    }
  ]
})

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>

AmCharts - 控制值轴标签

1 个答案: