AmCharts-控制值轴标签 [英] AmCharts - Controlling value axis labels

问题描述

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

I want my y-axis to have labels 0%, 25%, 50%, 75%, 100%

我本来期望4或5的gridCount可以做到，但是它拒绝了.我尝试将labelFrequency设置为25，但这也不起作用.

I would have expected a gridCount of 4 or 5 to do it, but it refuses. I've tried labelFrequency set to 25 but that doesn't work either.

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
      }
    ]
  })

推荐答案

不幸的是，没有一种方法可以通过value轴属性完全设置自己的轴分割.要解决此问题，您可以使用指南:

Unfortunately there isn't a way to outright set your own axis divisions through the value axis properties. To workaround this, you can disable the value axis labels and grids and set up your own grid and labels using 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-控制值轴标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！