Question

嗨，我每个人都在使用列表范围类型的Highchart，我得到了图表 http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/并根据我的需要对其进行修改，现在我需要在x轴上显示月份名称，并且y轴值是固定的。目前我无法将x轴数字更改为月份。

我的脚本如下：

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'columnrange',
            inverted: true
        },

        title: {
            text: 'Employee Bill Pending Detail'
        },

        subtitle: {
            text: 'Month Wise'
        },

        xAxis: {
            categories: ['Bank Bill Pending', 'Clam Pending']
        },

        yAxis: {
            title: {
                text: 'Session (2013-14)'
            }
        },

        tooltip: {
            valueSuffix: ''
        },

        plotOptions: {
            columnrange: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return this.y ;
                    }
                }
            }
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Months',
            data: [
                [1, 4], // Here the [1,4] denotes months between 'Jan' & 'Apr'.
                [2, 8]  // Here the [2,8] denotes months between 'Feb' & 'Aug'.         

            ]
        }]
    });
});

任何帮助都会非常明显。

Answer 1

实际上这很容易。相关API文档：

您需要像这样设置数据（或使用显式的js时间戳）：

series: [{
    name: 'Months',
    data: [
        [Date.UTC(2013, 0, 1), Date.UTC(2013, 3, 1)], // Here the [1,4] denotes months between 'Jan' & 'Apr'.
        [Date.UTC(2013, 2, 1), Date.UTC(2013, 7, 1)] // Here the [2,8] denotes months between 'Feb' & 'Aug'.         
        ]
}]

请注意，Data.UTC()为零，因此1月为0。该列表中的最后一个元素是日期。由于您的数据只是按月计算，因此我将其设为“1”。您可以在dataLabel上显示所需内容，tooltip处理dateFormat。

示例jsFiddle。

高图表 - 列格式类型取决于月份

1 个答案: