线条图和柱形图都存在这个问题。
请参阅小提琴http://jsfiddle.net/brookssh/tzhoka34/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chartContainer',
height: 595,
width: 1100,
type: '',
defaultSeriesType: 'spline',
backgroundColor: null,
reflow: false,
shadow: true,
marginLeft: 60,
spacingTop: 5,
marginTop: 70,
width: 1100,
spacingBottom: 100,
},
legend: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: "Daily Utility Demand Comparison",
style: {
color: '#484a4a',
fontSize: '22px',
fontFamily: 'Arial, Helvetica, sans-serif',
fontWeight: 'bold'
}
},
subtitle: {
text: "<span style=\"color:#484a4a; font-weight:bold;\">Main Hydro - </span><br><span style=\"color:grey\">Tuesday, January 01 2013 12:00 AM and Wednesday, January 01 2014 12:00 AM</span>",
y: 36
},
xAxis: [{
title: {
text: 'Time',
style: {
color: '#0063A2',
fontFamily: 'Arial, Helvetica, sans-serif',
fontWeight: 'bold'
}
},
type: 'datetime',
dateTimeLabelFormats: {
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%I:%M %p',
day: '%b %d',
month: '%B',
year: '%Y'
},
plotBands: []
}, {
labels: {
enabled: false
},
lineWidth: 0,
tickWidth: 0
}],
yAxis: {
title: {
text: 'Demand (kW)',
style: {
color: '#0063A2',
fontFamily: 'Arial, Helvetica, sans-serif',
fontWeight: 'bold'
}
},
plotLines: [{
value: 0,
width: 2,
color: '#000000'
}],
min: 0
},
tooltip: {
formatter: function () {
if (this.series.name == "Tuesday, January 01 2013 Demand|14657.85 kWh") var fontColor = "0063A2";
else var fontColor = "A21500";
return Highcharts.dateFormat('%A, %b %e, %Y - %I:%M %P : ', this.x) + '<b>' + Highcharts.numberFormat(this.y, 2) + ' kW' + '</b>';
}
},
plotOptions: {
spline: {
animation: {
duration: 1500
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
}
}
},
series: [{
name: "Tuesday, January 01 2013 Demand|14657.85 kWh",
zIndex: 2,
color: '#0063A2',
xAxis: 0,
data: [
[1356999300000, 430.20000],
[1357000200000, 414.00000],
[1357001100000, 410.40000],
[1357002000000, 414.00000],
[1357002900000, 421.20000],
[1357003800000, 417.60000],
[1357004700000, 410.40000],
[1357005600000, 412.20000],
[1357006500000, 408.60000],
[1357007400000, 408.60000],
[1357008300000, 406.80000],
[1357009200000, 403.20000],
[1357010100000, 408.60000],
[1357011000000, 410.40000],
[1357011900000, 408.60000],
[1357012800000, 423.00000],
[1357013700000, 419.40000],
[1357014600000, 405.00000],
[1357015500000, 414.00000],
[1357016400000, 415.80000],
[1357017300000, 518.40000],
[1357018200000, 511.20000],
[1357019100000, 550.80000],
[1357020000000, 541.80000],
[1357020900000, 640.80000],
[1357021800000, 646.20000],
[1357022700000, 685.80000],
[1357023600000, 693.00000],
[1357024500000, 714.60000],
[1357025400000, 723.60000],
[1357026300000, 727.20000],
[1357027200000, 727.20000],
[1357028100000, 747.00000],
[1357029000000, 730.80000],
[1357029900000, 738.00000],
[1357030800000, 739.80000],
[1357031700000, 730.80000],
[1357032600000, 732.60000],
[1357033500000, 723.60000],
[1357034400000, 725.40000],
[1357035300000, 730.80000],
[1357036200000, 729.00000],
[1357037100000, 732.60000],
[1357038000000, 729.00000],
[1357038900000, 727.20000],
[1357039800000, 730.80000],
[1357040700000, 729.00000],
[1357041600000, 730.80000],
[1357042500000, 730.80000],
[1357043400000, 738.00000],
[1357044300000, 727.20000],
[1357045200000, 730.80000],
[1357046100000, 723.60000],
[1357047000000, 725.40000],
[1357047900000, 732.60000],
[1357048800000, 725.40000],
[1357049700000, 729.00000],
[1357050600000, 730.80000],
[1357051500000, 734.40000],
[1357052400000, 730.80000],
[1357053300000, 732.60000],
[1357054200000, 727.20000],
[1357055100000, 736.20000],
[1357056000000, 732.60000],
[1357056900000, 729.00000],
[1357057800000, 732.60000],
[1357058700000, 730.80000],
[1357059600000, 736.20000],
[1357060500000, 747.00000],
[1357061400000, 730.80000],
[1357062300000, 730.80000],
[1357063200000, 750.60000],
[1357064100000, 714.60000],
[1357065000000, 702.00000],
[1357065900000, 703.80000],
[1357066800000, 714.60000],
[1357067700000, 613.80000],
[1357068600000, 586.80000],
[1357069500000, 583.20000],
[1357070400000, 579.60000],
[1357071300000, 558.00000],
[1357072200000, 558.00000],
[1357073100000, 552.60000],
[1357074000000, 554.40000],
[1357074900000, 538.20000],
[1357075800000, 516.60000],
[1357076700000, 513.00000],
[1357077600000, 523.80000],
[1357078500000, 518.40000],
[1357079400000, 516.60000],
[1357080300000, 518.40000],
[1357081200000, 514.80000],
[1357082100000, 464.40000],
[1357083000000, 448.20000],
[1357083900000, 453.60000],
[1357084800000, 459.00000]
]
}, {
name: "Wednesday, January 01 2014 Demand|12673.80 kWh",
zIndex: 1,
color: '#A21500',
xAxis: 1,
data: [
[1388535300000, 480.60000],
[1388536200000, 469.80000],
[1388537100000, 475.20000],
[1388538000000, 475.20000],
[1388538900000, 473.40000],
[1388539800000, 477.00000],
[1388540700000, 455.40000],
[1388541600000, 390.60000],
[1388542500000, 394.20000],
[1388543400000, 396.00000],
[1388544300000, 403.20000],
[1388545200000, 401.40000],
[1388546100000, 403.20000],
[1388547000000, 401.40000],
[1388547900000, 399.60000],
[1388548800000, 396.00000],
[1388549700000, 405.00000],
[1388550600000, 475.20000],
[1388551500000, 469.80000],
[1388552400000, 475.20000],
[1388553300000, 504.00000],
[1388554200000, 518.40000],
[1388555100000, 543.60000],
[1388556000000, 534.60000],
[1388556900000, 568.80000],
[1388557800000, 572.40000],
[1388558700000, 595.80000],
[1388559600000, 599.40000],
[1388560500000, 590.40000],
[1388561400000, 579.60000],
[1388562300000, 581.40000],
[1388563200000, 577.80000],
[1388564100000, 585.00000],
[1388565000000, 585.00000],
[1388565900000, 574.20000],
[1388566800000, 581.40000],
[1388567700000, 577.80000],
[1388568600000, 574.20000],
[1388569500000, 567.00000],
[1388570400000, 574.20000],
[1388571300000, 581.40000],
[1388572200000, 576.00000],
[1388573100000, 567.00000],
[1388574000000, 599.40000],
[1388574900000, 604.80000],
[1388575800000, 603.00000],
[1388576700000, 592.20000],
[1388577600000, 586.80000],
[1388578500000, 604.80000],
[1388579400000, 613.80000],
[1388580300000, 563.40000],
[1388581200000, 527.40000],
[1388582100000, 522.00000],
[1388583000000, 522.00000],
[1388583900000, 518.40000],
[1388584800000, 507.60000],
[1388585700000, 502.20000],
[1388586600000, 513.00000],
[1388587500000, 525.60000],
[1388588400000, 504.00000],
[1388589300000, 511.20000],
[1388590200000, 500.40000],
[1388591100000, 511.20000],
[1388592000000, 514.80000],
[1388592900000, 507.60000],
[1388593800000, 516.60000],
[1388594700000, 523.80000],
[1388595600000, 522.00000],
[1388596500000, 543.60000],
[1388597400000, 601.20000],
[1388598300000, 597.60000],
[1388599200000, 588.60000],
[1388600100000, 576.00000],
[1388601000000, 588.60000],
[1388601900000, 597.60000],
[1388602800000, 595.80000],
[1388603700000, 554.40000],
[1388604600000, 556.20000],
[1388605500000, 559.80000],
[1388606400000, 558.00000],
[1388607300000, 554.40000],
[1388608200000, 554.40000],
[1388609100000, 541.80000],
[1388610000000, 545.40000],
[1388610900000, 536.40000],
[1388611800000, 529.20000],
[1388612700000, 527.40000],
[1388613600000, 527.40000],
[1388614500000, 534.60000],
[1388615400000, 534.60000],
[1388616300000, 534.60000],
[1388617200000, 525.60000],
[1388618100000, 496.80000],
[1388619000000, 493.20000],
[1388619900000, 495.00000],
[1388620800000, 502.20000]
]
}]
});
答案 0 :(得分：0)
您尚未为第二个type指定xAxis。这会导致它默认为linear，而不会与您xAxis的第一个datetime对齐。
只需将type: 'datetime'添加到您的第二个x轴，系列就应该排成一行，因为您已经在两个系列中等分了一些点。
请参阅this updated JSFiddle的外观。