Highcharts x軸日期格式問題

我試圖用highcharts建立一個堆疊的酒吧。我在x軸上有一些關於日期時間格式的問題。看到這裏：http://jsfiddle.net/9y2gnnLy/Highcharts x軸日期格式問題

我想添加到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那樣進行分組？

來源

2016-09-17 sergo11221

你有沒有考慮過使用你的系列的列格式類型。有了這種類型的系列，你可以更簡單地製作你想要的東西：http://jsfiddle.net/oamads2y/1/如果它能滿足你的要求，我會把它作爲答案 –

謝謝！是否可以消除堆疊杆之間的空間？例如，將類別分組：年 - 五月，六月，七月？ – sergo11221

您可以更改酒吧中的範圍，這樣它們就不會堆放。您可以使用分組類別插件添加更多類別級別：http://jsfiddle.net/oamads2y/3/ –

您可以使用您的系列的列格式類型。使用這種類型的系列，製作您想要的圖表會簡單得多。

你可以在你的酒吧裏設置範圍，所以他們會看起來像他們堆疊。您可以使用分組類別插件添加更多的類別層次 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}" 
    } 
}]

可以使用對齊移動你的dataLabels到你的酒吧的中心：「中心」放慢參數：

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

在這裏你可以看到一個示例如何工作： http://jsfiddle.net/ttrtb6xt/1/

來源

2016-09-26 08:56:57

謝謝！是否可以像[this]一樣組織（http://i.stack.imgur.com/9jUiW.png） – sergo11221

您可以添加空類別來拆分您的列：http://jsfiddle.net/dr9jzpuf/ –

您可以還爲新的類別類型添加新的xAxis：http://jsfiddle.net/3c5k2got/如果我的示例已滿足您的要求，請將我的答案標記爲正確 –

Highcharts x軸日期格式問題

回答

相關問題