AmCharts - 控制值軸標籤

我希望我的y軸有標籤的0％，25％，50％，75％，100％AmCharts - 控制值軸標籤

我本來期望的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 
     } 
    ] 
    })

來源

2017-10-11 Chris G.

不幸的是，沒有辦法通過值軸屬性徹底設置自己的軸分度。要解決此，您可以禁用軸標籤和電網的價值和建立自己的電網和標籤使用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>

來源

2017-10-11 16:24:27 xorspark

AmCharts - 控制值軸標籤

回答

相關問題