高图表X轴显示月份和年份

时间:2014-10-17 04:07:06

标签: javascript highcharts

在这个高图表编码中,我想将X轴更改为显示月份和年份。(ex-Feb-20014)我的代码在这里工作。怎么办?我想要至少5年。我的图表是柱形图。请注意

<script type="text/javascript">
                    $(function () {
        // Set up the chart
                        var chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'container',
                                type: 'column',
                                margin: 75,
                                options3d: {
                                    enabled: false,
                                    alpha: 15,
                                    beta: 15,
                                    depth: 50,
                                    viewDistance: 25
                                }
                            },
                            title: {
                                text: 'Payment Details'
                            },
                            plotOptions: {
                                column: {
                                    depth: 25
                                }
                            },
                            series: [{
                                    data: [
        <?php
        for ($i = 0; $i <= 12; $i++) {
            echo $i. ',';
        }
        ?>

                                    ]

                                }]
                        });

                        function showValues() {
                            $('#R0-value').html(chart.options.chart.options3d.alpha);
                            $('#R1-value').html(chart.options.chart.options3d.beta);
                        }

        // Activate the sliders
                        $('#R0').on('change', function () {
                            chart.options.chart.options3d.alpha = this.value;
                            showValues();
                            chart.redraw(false);
                        });
                        $('#R1').on('change', function () {
                            chart.options.chart.options3d.beta = this.value;
                            showValues();
                            chart.redraw(false);
                        });

                        showValues();
                    });
                </script>

1 个答案:

答案 0 :(得分:2)

试试这个:

xAxis: {
    type: 'datetime',          
    labels: {
        formatter: function() {
             return Highcharts.dateFormat('%b-%Y', this.value);
        }
    }
},

来自文档:

%b - Abbreviated month name, based on the locale(Jan through Dec)

%Y - Four digit representation for the year(Example: 2038)