如何在x轴上仅显示ForceShow-ticks?

时间:2017-11-06 12:45:17

标签: javascript jquery amcharts

我有一个连续的amChart,在CathegoryAxis上我有年份值(从2001年到2016年),我想只显示其中一些。使用forceShowField我可以显示它们,但默认的刻度仍然存在。有没有办法只显示forceSHowFields或给出一个包含所有刻度的列表?



var chart = AmCharts.makeChart("resultchart", {
      "type": "serial",
      "theme": "light",
      "marginRight": 40,
      "marginLeft": 40,
      "autoMarginOffset": 20,
      "mouseWheelZoomEnabled": false,
      "period":'YYYY',
      "dataDateFormat": "YYYY",
      "categoryField": "date",
      "categoryAxis": {
          "parseDates": false,
          "dashLength": 1,
          "forceShowField":"forceShow",
          "startOnAxis": true
      },
      "numberFormatter": {
          "precision": 0,
          "decimalSeparator": ",",
          "thousandsSeparator": "."
      },
      "export": {
          "enabled": true,
          "menu":[]
      }
})

<div id="resultchart"></div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

显示特定滴答的唯一方法是停用axis-generated labelsticks并使用guides创建自己的:

  "categoryAxis": {
    // ...
    //disable labels/ticks generated by axes
    "labelsEnabled": false,
    "tickLength": 0,
    //use guides to create your own
    "guides": [{
      "category": "2004",
      "label": "2004",
      "tickLength": 5
    }, {
      "category": "2008",
      "label": "2008",
      "tickLength": 5
    }, 

var chart = AmCharts.makeChart("resultchart", {
  "type": "serial",
  "theme": "light",
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "mouseWheelZoomEnabled": false,
  "graphs": [{
    "valueField": "value",
    "type": "column",
    "fillAlphas": .8
  }],
  "categoryField": "date",
  "categoryAxis": {
    "dashLength": 1,
    "startOnAxis": true,
    //disable labels/ticks generated by axes
    "labelsEnabled": false,
    "tickLength": 0,
    //use guides to create your own
    "guides": [{
      "category": "2004",
      "label": "2004",
      "tickLength": 5
    }, {
      "category": "2008",
      "label": "2008",
      "tickLength": 5
    }, {
      "category": "2012",
      "label": "2012",
      "tickLength": 5
    }, {
      "category": "2016",
      "label": "2016",
      "tickLength": 5
    }]
  },
  "numberFormatter": {
    "precision": 0,
    "decimalSeparator": ",",
    "thousandsSeparator": "."
  },
  "export": {
    "enabled": true,
    "menu": []
  },
  "dataProvider": [{
      "date": 2001,
      "value": 16
    },
    {
      "date": 2002,
      "value": 10
    },
    {
      "date": 2003,
      "value": 12
    },
    {
      "date": 2004,
      "value": 15
    },
    {
      "date": 2005,
      "value": 18
    },
    {
      "date": 2006,
      "value": 10
    },
    {
      "date": 2007,
      "value": 17
    },
    {
      "date": 2008,
      "value": 19
    },
    {
      "date": 2009,
      "value": 18
    },
    {
      "date": 2010,
      "value": 10
    },
    {
      "date": 2011,
      "value": 13
    },
    {
      "date": 2012,
      "value": 17
    }
  ]

})
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>

<div id="resultchart" style="width: 100%; height: 300px;"></div>