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}'
        }
    }]
});
});

可以像this这样分组吗？

Answer 1

您可以使用您的系列的 columnrange 类型。使用这种类型的系列，制作您想要的图表会简单得多。

您可以在条形中设置范围，使它们看起来像堆叠在一起。您可以使用分组类别插件来添加更多类别级别 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/