amchart add labels in between grids

2019-07-16 12:18发布

问题:

I need to add labels with difference of 10 in both axis( one each between the grid ), WITHOUT compromising the present number of grids.So the number of grid lines should stay 11 and number of labels will go up to 21. Hope that clears my query.Above is my chart, and this is the code -

var chart = AmCharts.makeChart("chartdiv", {                      
    "type": "xy",
    "dataProvider": json,   
    "valueAxes":
    [                                           
        {
            "id":"my_y",
            "autoGridCount": false,
            "position": "right",
            "tickLength":0,
            "gridThickness":0.25,
            "minimum":-100,
            "maximum":100,                          
            "gridCount": 11, 
            "labelFrequency" : 0.5,
            "gridColor":"black",  
            "gridAlpha":0.50,   
            "labelOffset": -356,
            "axisAlpha":0,      
            "strictGridCount" : true,
        }, 
        {
            "id":"my_x",        
            "autoGridCount": false, 
            "position": "bottom",                       
            "tickLength":0,
            "gridThickness": 0.25,                          
            "minimum":-100,
            "maximum":100,
            "gridCount": 11,

            "labelFrequency" : 0.5,
            "gridColor":"black",
            "gridAlpha":0.50,
            "labelOffset": -320,                    
            "axisAlpha":0,
        },   
    ],
    "borderAlpha" : 0, 
    "startDuration": 0, 

    "legend":[{                     
        "useGraphSettings": false,
        "verticalGap":0,
    }],
    "guides":[
                {
                  "fillAlpha": 0.10,
                  "value": -100,
                  "toValue": 100,                         
                }
            ],
    "graphs": 
    [                                
        {
            "id":"g1",
            "lineColor": "#FF6600",
            "bulletBorderThickness": 1,
            "hideBulletsCount": 30,
            "animationDuration":0,
            "balloonText": "[[value]]",
            "bullet": "circle",
            "lineAlpha": 0,
            "valueField": "value",
            "xField": "x",
            "yField": "y",
            "fillAlphas": 0,
            "bulletBorderAlpha": 0,
            "minBulletSize": 30,
            "maxBulletSize": 30,
            "labelText":"[[x]]",
            "labelPosition":"inside",
            "markerType" : "none",
            "switchable":false,
        }, 
    ],
    "marginLeft": 20,
    "marginBottom": 20,         
    "export": {
    "enabled": true,
    "menu" : [],
    },
}); 

PS : I tried to change the labelFrequency value but I don't think it takes values below 1.

回答1:

You're right to assume that labelFrequency can't be set to anything lower than 1, or a non-integer for that matter.

The only workaround I can think of is to increase gridCount to the number which displays labels in increments that you want. I.e. 21.

Then disable grid lines altogether. (gridAlpha: 0)

And finally use guides to display lines at values that you need lines displayed at. I.e.:

{
  "id": "my_y",
  "autoGridCount": false,
  "position": "right",
  "tickLength": 0,
  "gridThickness": 0.25,
  "minimum": -100,
  "maximum": 100,
  "gridCount": 21,
  "labelFrequency": 0.5,
  "gridColor": "black",
  "gridAlpha": 0,
  "labelOffset": -356,
  "axisAlpha": 0,
  "strictGridCount": true,
  "guides": [
    { "value": 80, "lineAlpha": 0.5 },
    { "value": 60, "lineAlpha": 0.5 },
    { "value": 40, "lineAlpha": 0.5 },
    { "value": 20, "lineAlpha": 0.5 },
    { "value": 0, "lineAlpha": 0.5 },
    { "value": -20, "lineAlpha": 0.5 },
    { "value": -40, "lineAlpha": 0.5 },
    { "value": -60, "lineAlpha": 0.5 },
    { "value": -80, "lineAlpha": 0.5 }
  ]
}