高位图表-列范围类型取决于月份

High Chart - columnrange Type depending on months

本文关键字:类型 范围 取决于 -列 位图 高位图      更新时间:2023-11-24

嗨,每次我使用columnrange类型的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'.         
            ]
        }]
    });
});

任何帮助都是非常可观的。

这其实很容易。API相关文件:

  • 日期格式()
  • yAxis.type

你需要这样设置你的数据(或者使用显式的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()是基于零的,因此一月是"0"。该列表中的最后一个元素是日期。由于你的数据是按月计算的,所以我把它定为"1"。当dataLabeltooltipdateFormat处理时,您可以在这里拥有您想要的任何内容。

示例jsFiddle。