Xaxis月标签不起作用。

时间:2017-09-02 20:06:42

标签: ajax highcharts

我想在我的Xaxis标签上花几个月的时间,但是当我尝试添加时,它会显示0到2,但没有几个月,我应该如何修复它?我尝试仅在本月的部分时间检索json以将其添加到Xaxis上,但它没有用,我怎么能这样做呢?任何提示,这是我的代码到目前为止的样子。

var sales_by_month = new Array();
    var month = new Array();
    $.ajax({
        url: URL_GET_SALES_BY_MONTH,
        type: 'POST',
        dataType: 'json',
        success: function (data) {
            for (i = 0; i < data.length; i++) {
                sales_by_month.push([data[i].month, data[i].total]);
                month.push(data[i].month);
            }
            Highcharts.chart('income_chart', {
                title: {
                    text: 'Total Earnings'
                },
                yAxis: {
                    title: {
                        text: ''
                    }
                },
                xAxis: {
                    type: 'date'
                },
                legend: {
                    enabled: false

                },
                credits: {
                    enabled: false
                },
                exporting: {
                    buttons: {
                        contextButton: {
                            menuItems: [{
                                textKey: 'downloadPNG',
                                onclick: function () {
                                    this.exportChart();
                                }
                        }, {
                                textKey: 'downloadJPEG',
                                onclick: function () {
                                    this.exportChart({
                                        type: 'image/jpeg'
                                    });
                                }
                        }, {
                                textKey: 'downloadPDF',
                                onclick: function () {
                                    this.exportChart({
                                        type: 'application/pdf'
                                    });
                                }
                        }]
                        }
                    }
                },
                series: [{
                    name: 'Sales & Distribution',
                    data: sales_by_month
            }]

            });
        }
    });

json

[{"orders":3,"total":9500,"month":"June"},{"orders":55,"total":71200,"month":"July"},{"orders":10,"total":1529,"month":"August"}]

graph

1 个答案:

答案 0 :(得分:0)

检查api xAxis.categories以获取详细信息。您正在创建几个月的数组。您应该将其传递给xAxis config。

Fiddle演示

Highcharts.chart('income_chart', {

    title: {
            text: 'Total Earnings'
        },
    yAxis: {
        title: {
            text: ''
        }
    },
    xAxis: {
        categories:month
    },
    legend: {
        enabled: false

    },
    credits: {
        enabled: false
    },
    exporting: {
        buttons: {
            contextButton: {
                menuItems: [{
                    textKey: 'downloadPNG',
                    onclick: function () {
                        this.exportChart();
                    }
            }, {
                    textKey: 'downloadJPEG',
                    onclick: function () {
                        this.exportChart({
                            type: 'image/jpeg'
                        });
                    }
            }, {
                    textKey: 'downloadPDF',
                    onclick: function () {
                        this.exportChart({
                            type: 'application/pdf'
                        });
                    }
            }]
            }
        }
    },
    series: [{
        name: 'Sales & Distribution',
        data: sales_by_month
}]

});