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

您可以使用系列的列范围类型。使用这种类型的系列，制作您想要的图表会更加简单。

您可以在条形图中设置范围，因此它们看起来像是堆叠的。您可以使用分组类别插件添加更多类别级别 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'paramter将数据标签移动到条形图的中心位置：

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

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

Highcharts x轴日期格式问题

1 个答案: