amCharts align values axis' null level

问题

I have an Amchart graph with multiple charts and multiple value axis. Values may be quite different, for example, one chart's values may vary from -3000 to 3000, while another one is 0-40.

What I want is to represent all charts so they all will be visible. So, I use 'synchronizeGrid' option.

Here's my current code:

  "synchronizeGrid": true,
  "valueAxes": [{
    "id": "v1",
    "axisColor": "#FF6600",
    "axisThickness": 2,
    "axisAlpha": 1,
    "position": "left"
  }, {
    "id": "v2",
    "axisColor": "#FCD202",
    "axisThickness": 2,
    "axisAlpha": 1,
    "offset": 50,
    "position": "left"
  }, {
    "id": "v3",
    "axisColor": "#B0DE09",
    "axisThickness": 2,
    "gridAlpha": 0,
    "offset": 100,
    "axisAlpha": 1,
    "position": "left"
  }],

https://jsfiddle.net/fungxbsh/

However, you may notice that null level is not the same, i.e. each chart has null level at different grid line. Is there a way to force all charts to use the same null level?

回答1:

The only way I found to make the three axes use the same "null" value is to simply find the maximum absolute value for each of them and set it as maximum and minimum parameters while defining the ValueAxis according to the documentation of AmCharts.

So at the end, you'll have three variables to store the absolute values maxVisits, maxHits, maxViews.

Then you set the maximum and minimum parameters like this:

"valueAxes": [{
    "id": "v1",
    "axisColor": "#FF6600",
    "axisThickness": 2,
    "axisAlpha": 1,
    "position": "left",
    "maximum": maxVisits,
    "minimum": -maxVisits
  }, {
    "id": "v2",
    "axisColor": "#FCD202",
    "axisThickness": 2,
    "axisAlpha": 1,
    "position": "right",
    "maximum": maxHits,
    "minimum": -maxHits
  }, {
    "id": "v3",
    "axisColor": "#B0DE09",
    "axisThickness": 2,
    "gridAlpha": 0,
    "offset": 50,
    "axisAlpha": 1,
    "position": "left",
    "maximum": maxViews,
    "minimum": -maxViews
  }]

And finally you need to set the synchronizeGrid parameter to false again.

See the full example here.

回答2:

Here is the best solution I've come up with:

Make use of:

            "synchronizeWith": "v1",
            "synchronizationMultiplier": sync

For example, on your v2 axis, use 'synchronizeWith' and set the value to the Axis you want to sync to. For multiplier, you want to look for the max values in both axes, and divide the smaller value by the bigger value, giving you a ratio. This ratio is your multiplier.

来源：https://stackoverflow.com/questions/44128968/amcharts-align-values-axis-null-level

标签

javascript

charts

amcharts