0
我有下面的圖表顯示多條曲線。這些曲線都發生在不同的時間，但我正在調整它們，以便可以將它們視爲同時發生。您可以在點上查看每個點的實際日期。如何讓Highcharts用相對日期標記日期時間X軸？
//set global chart options
$(document).ready(function() {
Highcharts.setOptions({
xAxis: {
type: 'datetime',
},
yAxis: [{
title: {
text: 'FIXME',
style: {
color: '#4bb2c5',
},
},
min: 0,
maxPadding: 0,
}, ],
legend: {
labelFormat: '<span style="font-size: xx-small;">{name}</span>',
},
tooltip: {
formatter: function() {
return Highcharts.dateFormat('%B %e, %Y', this.point.name) + "<br>Cases: " + this.point.y;
}
},
});
drawGraphMultipleCurves();
});
var plotMultipleCurves = null;
function drawGraphMultipleCurves() {
//no need to redraw if we've already drawn the graph
if (plotMultipleCurves != null)
return;
//shifted cumulative time series
var cumulativeTimeSeriesMultipleCurves549 = [
{
x: Date.UTC(2001, 8, 1, 0),
y: 1,
name: Date.UTC(2008, 9, 27, 0),
},
{
x: Date.UTC(2001, 8, 8, 0),
y: 2,
name: Date.UTC(2008, 10, 3, 0),
},
{
x: Date.UTC(2001, 8, 15, 0),
y: 7,
name: Date.UTC(2008, 10, 10, 0),
},
{
x: Date.UTC(2001, 8, 22, 0),
y: 14,
name: Date.UTC(2008, 10, 17, 0),
},
{
x: Date.UTC(2001, 8, 29, 0),
y: 33,
name: Date.UTC(2008, 10, 24, 0),
},
{
x: Date.UTC(2001, 9, 6, 0),
y: 50,
name: Date.UTC(2008, 11, 1, 0),
},
{
x: Date.UTC(2001, 9, 13, 0),
y: 65,
name: Date.UTC(2008, 11, 8, 0),
},
{
x: Date.UTC(2001, 9, 20, 0),
y: 97,
name: Date.UTC(2008, 11, 15, 0),
},
{
x: Date.UTC(2001, 9, 27, 0),
y: 128,
name: Date.UTC(2008, 11, 22, 0),
},
{
x: Date.UTC(2001, 10, 3, 0),
y: 192,
name: Date.UTC(2008, 11, 29, 0),
},
{
x: Date.UTC(2001, 10, 10, 0),
y: 239,
name: Date.UTC(2009, 0, 5, 0),
},
{
x: Date.UTC(2001, 10, 17, 0),
y: 298,
name: Date.UTC(2009, 0, 12, 0),
},
{
x: Date.UTC(2001, 10, 24, 0),
y: 366,
name: Date.UTC(2009, 0, 19, 0),
},
{
x: Date.UTC(2001, 11, 1, 0),
y: 439,
name: Date.UTC(2009, 0, 26, 0),
},
{
x: Date.UTC(2001, 11, 8, 0),
y: 543,
name: Date.UTC(2009, 1, 2, 0),
},
{
x: Date.UTC(2001, 11, 15, 0),
y: 623,
name: Date.UTC(2009, 1, 9, 0),
},
{
x: Date.UTC(2001, 11, 22, 0),
y: 692,
name: Date.UTC(2009, 1, 16, 0),
},
{
x: Date.UTC(2001, 11, 29, 0),
y: 738,
name: Date.UTC(2009, 1, 23, 0),
},
{
x: Date.UTC(2002, 0, 5, 0),
y: 783,
name: Date.UTC(2009, 2, 2, 0),
},
{
x: Date.UTC(2002, 0, 12, 0),
y: 819,
name: Date.UTC(2009, 2, 9, 0),
},
{
x: Date.UTC(2002, 0, 19, 0),
y: 836,
name: Date.UTC(2009, 2, 16, 0),
},
{
x: Date.UTC(2002, 0, 26, 0),
y: 850,
name: Date.UTC(2009, 2, 23, 0),
},
{
x: Date.UTC(2002, 1, 2, 0),
y: 864,
name: Date.UTC(2009, 2, 30, 0),
},
{
x: Date.UTC(2002, 1, 9, 0),
y: 875,
name: Date.UTC(2009, 3, 6, 0),
},
{
x: Date.UTC(2002, 1, 16, 0),
y: 881,
name: Date.UTC(2009, 3, 13, 0),
},
{
x: Date.UTC(2002, 1, 23, 0),
y: 884,
name: Date.UTC(2009, 3, 20, 0),
},
{
x: Date.UTC(2002, 2, 2, 0),
y: 885,
name: Date.UTC(2009, 3, 27, 0),
},
{
x: Date.UTC(2002, 2, 9, 0),
y: 888,
name: Date.UTC(2009, 4, 4, 0),
},
{
x: Date.UTC(2002, 2, 16, 0),
y: 890,
name: Date.UTC(2009, 4, 11, 0),
},
{
x: Date.UTC(2002, 2, 23, 0),
y: 892,
name: Date.UTC(2009, 4, 18, 0),
},
];
//shifted cumulative time series
var cumulativeTimeSeriesMultipleCurves805 = [
{
x: Date.UTC(2001, 8, 1, 0),
y: 2,
name: Date.UTC(2012, 8, 26, 0),
},
{
x: Date.UTC(2001, 8, 2, 0),
y: 4,
name: Date.UTC(2012, 8, 27, 0),
},
{
x: Date.UTC(2001, 8, 3, 0),
y: 5,
name: Date.UTC(2012, 8, 28, 0),
},
{
x: Date.UTC(2001, 8, 4, 0),
y: 7,
name: Date.UTC(2012, 8, 29, 0),
},
{
x: Date.UTC(2001, 8, 5, 0),
y: 9,
name: Date.UTC(2012, 8, 30, 0),
},
{
x: Date.UTC(2001, 8, 6, 0),
y: 19,
name: Date.UTC(2012, 9, 1, 0),
},
{
x: Date.UTC(2001, 8, 7, 0),
y: 34,
name: Date.UTC(2012, 9, 2, 0),
},
{
x: Date.UTC(2001, 8, 8, 0),
y: 53,
name: Date.UTC(2012, 9, 3, 0),
},
{
x: Date.UTC(2001, 8, 9, 0),
y: 88,
name: Date.UTC(2012, 9, 4, 0),
},
{
x: Date.UTC(2001, 8, 10, 0),
y: 114,
name: Date.UTC(2012, 9, 5, 0),
},
{
x: Date.UTC(2001, 8, 11, 0),
y: 129,
name: Date.UTC(2012, 9, 6, 0),
},
{
x: Date.UTC(2001, 8, 12, 0),
y: 154,
name: Date.UTC(2012, 9, 7, 0),
},
{
x: Date.UTC(2001, 8, 13, 0),
y: 186,
name: Date.UTC(2012, 9, 8, 0),
},
{
x: Date.UTC(2001, 8, 14, 0),
y: 212,
name: Date.UTC(2012, 9, 9, 0),
},
{
x: Date.UTC(2001, 8, 15, 0),
y: 231,
name: Date.UTC(2012, 9, 10, 0),
},
{
x: Date.UTC(2001, 8, 16, 0),
y: 269,
name: Date.UTC(2012, 9, 11, 0),
},
{
x: Date.UTC(2001, 8, 17, 0),
y: 300,
name: Date.UTC(2012, 9, 12, 0),
},
{
x: Date.UTC(2001, 8, 18, 0),
y: 317,
name: Date.UTC(2012, 9, 13, 0),
},
{
x: Date.UTC(2001, 8, 19, 0),
y: 327,
name: Date.UTC(2012, 9, 14, 0),
},
{
x: Date.UTC(2001, 8, 20, 0),
y: 352,
name: Date.UTC(2012, 9, 15, 0),
},
{
x: Date.UTC(2001, 8, 21, 0),
y: 381,
name: Date.UTC(2012, 9, 16, 0),
},
{
x: Date.UTC(2001, 8, 22, 0),
y: 412,
name: Date.UTC(2012, 9, 17, 0),
},
{
x: Date.UTC(2001, 8, 23, 0),
y: 441,
name: Date.UTC(2012, 9, 18, 0),
},
{
x: Date.UTC(2001, 8, 24, 0),
y: 489,
name: Date.UTC(2012, 9, 19, 0),
},
{
x: Date.UTC(2001, 8, 25, 0),
y: 507,
name: Date.UTC(2012, 9, 20, 0),
},
{
x: Date.UTC(2001, 8, 26, 0),
y: 546,
name: Date.UTC(2012, 9, 21, 0),
},
{
x: Date.UTC(2001, 8, 27, 0),
y: 605,
name: Date.UTC(2012, 9, 22, 0),
},
{
x: Date.UTC(2001, 8, 28, 0),
y: 656,
name: Date.UTC(2012, 9, 23, 0),
},
{
x: Date.UTC(2001, 8, 29, 0),
y: 701,
name: Date.UTC(2012, 9, 24, 0),
},
{
x: Date.UTC(2001, 8, 30, 0),
y: 762,
name: Date.UTC(2012, 9, 25, 0),
},
{
x: Date.UTC(2001, 9, 1, 0),
y: 832,
name: Date.UTC(2012, 9, 26, 0),
},
{
x: Date.UTC(2001, 9, 2, 0),
y: 894,
name: Date.UTC(2012, 9, 27, 0),
},
{
x: Date.UTC(2001, 9, 3, 0),
y: 941,
name: Date.UTC(2012, 9, 28, 0),
},
{
x: Date.UTC(2001, 9, 4, 0),
y: 959,
name: Date.UTC(2012, 9, 29, 0),
},
{
x: Date.UTC(2001, 9, 5, 0),
y: 980,
name: Date.UTC(2012, 9, 30, 0),
},
{
x: Date.UTC(2001, 9, 6, 0),
y: 1005,
name: Date.UTC(2012, 9, 31, 0),
},
{
x: Date.UTC(2001, 9, 7, 0),
y: 1036,
name: Date.UTC(2012, 10, 1, 0),
},
{
x: Date.UTC(2001, 9, 8, 0),
y: 1062,
name: Date.UTC(2012, 10, 2, 0),
},
{
x: Date.UTC(2001, 9, 9, 0),
y: 1074,
name: Date.UTC(2012, 10, 3, 0),
},
{
x: Date.UTC(2001, 9, 10, 0),
y: 1105,
name: Date.UTC(2012, 10, 4, 0),
},
{
x: Date.UTC(2001, 9, 11, 0),
y: 1154,
name: Date.UTC(2012, 10, 5, 0),
},
{
x: Date.UTC(2001, 9, 12, 0),
y: 1192,
name: Date.UTC(2012, 10, 6, 0),
},
{
x: Date.UTC(2001, 9, 13, 0),
y: 1218,
name: Date.UTC(2012, 10, 7, 0),
},
{
x: Date.UTC(2001, 9, 14, 0),
y: 1268,
name: Date.UTC(2012, 10, 8, 0),
},
{
x: Date.UTC(2001, 9, 15, 0),
y: 1302,
name: Date.UTC(2012, 10, 9, 0),
},
{
x: Date.UTC(2001, 9, 16, 0),
y: 1332,
name: Date.UTC(2012, 10, 10, 0),
},
{
x: Date.UTC(2001, 9, 17, 0),
y: 1357,
name: Date.UTC(2012, 10, 11, 0),
},
];
//shifted cumulative time series
var cumulativeTimeSeriesMultipleCurves534 = [
{
x: Date.UTC(2001, 8, 1, 0),
y: 0,
name: Date.UTC(2006, 0, 1, 0),
},
{
x: Date.UTC(2001, 9, 2, 0),
y: 1,
name: Date.UTC(2006, 1, 1, 0),
},
{
x: Date.UTC(2001, 9, 30, 0),
y: 1,
name: Date.UTC(2006, 2, 1, 0),
},
{
x: Date.UTC(2001, 10, 30, 0),
y: 1,
name: Date.UTC(2006, 3, 1, 0),
},
{
x: Date.UTC(2001, 11, 30, 0),
y: 5,
name: Date.UTC(2006, 4, 1, 0),
},
{
x: Date.UTC(2002, 0, 30, 0),
y: 9,
name: Date.UTC(2006, 5, 1, 0),
},
{
x: Date.UTC(2002, 2, 1, 0),
y: 21,
name: Date.UTC(2006, 6, 1, 0),
},
{
x: Date.UTC(2002, 3, 1, 0),
y: 301,
name: Date.UTC(2006, 7, 1, 0),
},
{
x: Date.UTC(2002, 4, 2, 0),
y: 735,
name: Date.UTC(2006, 8, 1, 0),
},
{
x: Date.UTC(2002, 5, 1, 0),
y: 964,
name: Date.UTC(2006, 9, 1, 0),
},
{
x: Date.UTC(2002, 6, 2, 0),
y: 1041,
name: Date.UTC(2006, 10, 1, 0),
},
{
x: Date.UTC(2002, 7, 1, 0),
y: 1044,
name: Date.UTC(2006, 11, 1, 0),
},
{
x: Date.UTC(2002, 8, 1, 0),
y: 1044,
name: Date.UTC(2007, 0, 1, 0),
},
];
//shifted cumulative time series
var cumulativeTimeSeriesMultipleCurves550 = [
{
x: Date.UTC(2001, 8, 1, 0),
y: 222,
name: Date.UTC(2001, 8, 1, 0),
},
{
x: Date.UTC(2001, 9, 1, 0),
y: 546,
name: Date.UTC(2001, 9, 1, 0),
},
{
x: Date.UTC(2001, 10, 1, 0),
y: 920,
name: Date.UTC(2001, 10, 1, 0),
},
{
x: Date.UTC(2001, 11, 1, 0),
y: 2247,
name: Date.UTC(2001, 11, 1, 0),
},
{
x: Date.UTC(2002, 0, 1, 0),
y: 70613,
name: Date.UTC(2002, 0, 1, 0),
},
{
x: Date.UTC(2002, 1, 1, 0),
y: 108834,
name: Date.UTC(2002, 1, 1, 0),
},
{
x: Date.UTC(2002, 2, 1, 0),
y: 161916,
name: Date.UTC(2002, 2, 1, 0),
},
{
x: Date.UTC(2002, 3, 1, 0),
y: 168862,
name: Date.UTC(2002, 3, 1, 0),
},
{
x: Date.UTC(2002, 4, 1, 0),
y: 170018,
name: Date.UTC(2002, 4, 1, 0),
},
{
x: Date.UTC(2002, 5, 1, 0),
y: 170170,
name: Date.UTC(2002, 5, 1, 0),
},
{
x: Date.UTC(2002, 6, 1, 0),
y: 170252,
name: Date.UTC(2002, 6, 1, 0),
},
{
x: Date.UTC(2002, 7, 1, 0),
y: 170324,
name: Date.UTC(2002, 7, 1, 0),
},
{
x: Date.UTC(2002, 8, 1, 0),
y: 170379,
name: Date.UTC(2002, 8, 1, 0),
},
];
//shifted cumulative time series
var cumulativeTimeSeriesMultipleCurves537 = [
{
x: Date.UTC(2001, 8, 1, 0),
y: 202,
name: Date.UTC(2006, 11, 1, 0),
},
{
x: Date.UTC(2001, 9, 2, 0),
y: 453,
name: Date.UTC(2007, 0, 1, 0),
},
{
x: Date.UTC(2001, 10, 2, 0),
y: 640,
name: Date.UTC(2007, 1, 1, 0),
},
{
x: Date.UTC(2001, 10, 30, 0),
y: 931,
name: Date.UTC(2007, 2, 1, 0),
},
{
x: Date.UTC(2001, 11, 31, 0),
y: 1387,
name: Date.UTC(2007, 3, 1, 0),
},
{
x: Date.UTC(2002, 0, 30, 0),
y: 2256,
name: Date.UTC(2007, 4, 1, 0),
},
{
x: Date.UTC(2002, 2, 2, 0),
y: 3701,
name: Date.UTC(2007, 5, 1, 0),
},
{
x: Date.UTC(2002, 3, 1, 0),
y: 5302,
name: Date.UTC(2007, 6, 1, 0),
},
{
x: Date.UTC(2002, 4, 2, 0),
y: 6353,
name: Date.UTC(2007, 7, 1, 0),
},
{
x: Date.UTC(2002, 5, 2, 0),
y: 7156,
name: Date.UTC(2007, 8, 1, 0),
},
{
x: Date.UTC(2002, 6, 2, 0),
y: 7804,
name: Date.UTC(2007, 9, 1, 0),
},
{
x: Date.UTC(2002, 7, 2, 0),
y: 8351,
name: Date.UTC(2007, 10, 1, 0),
},
{
x: Date.UTC(2002, 8, 1, 0),
y: 8839,
name: Date.UTC(2007, 11, 1, 0),
},
];
//plot the graph
plotMultipleCurves = new Highcharts.Chart({
chart: {
renderTo: 'multipleCurves',
},
title: {
text: 'Outbreak comparison',
},
series: [
{
data: cumulativeTimeSeriesMultipleCurves549,
name: '64% | Australia (2008)',
pointPlacement: 'between',
zIndex: 5,
marker: {
enabled: false,
},
color: '#800026',
},
{
data: cumulativeTimeSeriesMultipleCurves805,
name: '52% | Portugal (2012)',
pointPlacement: 'between',
zIndex: 4,
marker: {
enabled: false,
},
color: '#fd9841',
},
{
data: cumulativeTimeSeriesMultipleCurves534,
name: '46% | China (2006)',
pointPlacement: 'between',
zIndex: 3,
marker: {
enabled: false,
},
color: '#fee288',
},
{
data: cumulativeTimeSeriesMultipleCurves550,
name: '46% | Brazil (2001)',
pointPlacement: 'between',
zIndex: 2,
marker: {
enabled: false,
},
color: '#ffe691',
},
{
data: cumulativeTimeSeriesMultipleCurves537,
name: '45% | Singapore (2006)',
pointPlacement: 'between',
zIndex: 1,
marker: {
enabled: false,
},
color: '#ffeda0',
},
],
xAxis: [{
labels: {
enabled: false,
},
tickLength: 0,
title: {
text: 'Time',
},
}],
yAxis: [{
title: {
text: 'Cumulative cases',
},
min: 0,
maxPadding: 0,
}],
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/2.2.4/highcharts.js"></script>
<script src="https://code.highcharts.com/2.2.4/highcharts-more.js"></script>
<div id="multipleCurves"></div>現在的問題是，在X軸蜱/標籤是空白的。允許Highcharts爲X軸標籤放置日期顯然沒有意義。而不是將絕對日期，我想要相對日期。基本上，我想要一種方法來確定最長時間序列的長度，並適當縮放相關標籤。以下是一些示例：
- 在上面顯示的圖中，具有諸如「月1」，「月2」，「月3」等標籤是有意義的。並且，如果有太多如果最長的時間系列很短（比如說30天），那麼它會跳過適當的數量（例如，「第1個月」，「第4個月」，「第7個月」）
- 標籤將是「第1天」，「第2天」等。類似地，它將在適當時（例如，「第1天」，「第8天」，「第15天」）跳過標籤/蜱。
我該如何在Highcharts中做到這一點？
不幸的是，我不認爲'xAxis.labels.formatter'可以自己完成。在您的代碼段中，絕對標籤仍在顯示。我需要顯示*相對*標籤。 – Geoff
我認爲可以。我不確定我是否沒有遺漏任何東西，但上面的（更新）解決方案應該可以解決您的問題。當然，我只在月份添加邏輯。使用'this.axis.min'和'this.axis.max'來確定格式（月，日，小時等）。 –
酷！我認爲這確實會起作用。謝謝你的幫助！ – Geoff