Highcharts x轴日期格式问题

Question

我正在尝试用highcharts建立一个堆积的酒吧。 关于x轴上的日期时间格式，我有一些问题。 看到这里： http : //jsfiddle.net/9y2gnnLy/

我想向x轴添加6个月的间隔-从最小的日期开始，以最高的日期结束。 另外，我想在工具提示中计算持续时间。 例如，两个日期之间的时差：当前到期日期-退休日期=持续时间。 我如何在x轴上访问退休日期？

$(function () {
$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
        categories: ['Microsoft Office 2010', 'Microsoft Office 2013', 'Microsoft Office 365']
    },
    yAxis: {
                type: 'datetime',
        labels: {
            formatter: function () {
                return Highcharts.dateFormat('%b %Y', this.value);
            },
        }
            },
    legend: {
        enabled: false
    },
    tooltip: {
            formatter: function() {
                return  '<b>' + this.series.name +'</b><br/>' + '<b>' + this.x +': </b><br/>'+
                    Highcharts.dateFormat('%b %Y',
                                          new Date(this.y)) + " - "
                + Highcharts.dateFormat('%b %Y',
                                          new Date("Retired Date - How to access the retired date on x axis")) + '<br/><br/><b>Duration: </b>';
            }
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'Retired',
        color: 'rgba(223, 83, 83, .5)',
        data: [Date.parse("1/2/2013"), Date.parse("2/3/2014"), Date.parse("3/4/2015")],
        dataLabels: {
           enabled: true,
           format: '{series.name}'
        }
    }, {
        name: 'Expiring',
        data: [Date.parse("1/2/2012"), Date.parse("6/3/2013"), Date.parse("8/4/2014")], 
        dataLabels: {
           enabled: true,
           format: "{series.name}"
        }
    }, {
        name: 'Standard',
        data: [Date.parse("1/2/2011"), Date.parse("5/3/2012"), Date.parse("4/4/2013")],
        dataLabels: {
           enabled: true,
           format: "{series.name}"
        }
    }, {
        name: 'Planning',
        color: 'rgba(119, 152, 191, .5)',
        data: [Date.parse("1/2/2010"), Date.parse("9/3/2011"), Date.parse("5/4/2012")],
        dataLabels: {
           enabled: true,
           format: '{series.name}'
        }
    }]
});
});

可以像这样分组吗？

Answer 1

您可以使用系列的列范围类型。 使用这种类型的系列，可以更轻松地制作所需的图表。

您可以在条形图中设置范围，因此它们看起来就像是堆叠的。 您可以使用分组类别插件添加更多类别级别http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories

series: [{
  name: '1',
  data: [
    [Date.UTC(2011, 01, 01), Date.UTC(2011, 02, 01)],
    [Date.UTC(2011, 01, 02), Date.UTC(2011, 03, 01)],
    [Date.UTC(2011, 01, 01), Date.UTC(2011, 06, 01)]
  ],
  dataLabels: {
    enabled: true,
    format: "{series.name}"
  }
}, {
  name: '2',
  data: [
    [Date.UTC(2011, 02, 01), Date.UTC(2011, 03, 01)],
    [Date.UTC(2011, 03, 01), Date.UTC(2011, 10, 01)],
    [Date.UTC(2011, 06, 01), Date.UTC(2011, 08, 01)]
  ],
  dataLabels: {
    enabled: true,
    format: "{series.name}"
  }
}]

您可以使用align：'center'参数将dataLabels移至条形的中心：

dataLabels: {
  enabled: true,
  align: 'center',
  formatter: function() {
    return this.series.name;
  }
}

在这里，您可以看到一个示例它如何工作的： http : //jsfiddle.net/ttrtb6xt/1/