问题
当我在高图条形图中只有一个系列要显示多个用户时，它会显示在彼此之上而不是彼此相邻。以下是我正在使用的代码。请指导我正确的方向。
此外，如果我在任何用户的系列中再添加1个日期，它会正确显示，但这不是解决方案，因为我的图表上总会有1个日期。
JS小提琴链接：http://jsfiddle.net/bhats1989/b33mN/3/
代码
$(function () {
$('#team_container').highcharts({
chart: {
type: 'bar',
//inverted: true,
renderTo: 'container',
zoomType: 'xy',
events: {
},
zIndex: 5
},
title: {
text: 'Team Activity Game',
x: -20 //center
},
subtitle: {
text: 'Click and drag in the plot area to zoom in and scroll',
x: -25 //center
},
xAxis: {
title: {
text: 'Week Ending'
},
type: 'datetime',
maxZoom: 24 * 3600000, // Two days
labels: {
rotation: -45,
align: 'right',
formatter: function() {
return Highcharts.dateFormat('%d/%m/%Y', this.value);
}
},
tickInterval: 24 * 3600 * 1000,
},
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
if (!this.visible)
return true;
var seriesIndex = this.index;
var series = this.chart.series;
var j = series.length;
for (var i = 0; i < series.length; i++)
{
if (series[i].index != seriesIndex)
{
series[i].visible ? series[i].hide() : series[i].show();
series[j-1].hide();
}
}
return false;
}
}
}
},
yAxis: {
plotBands: [{ // mark the weekend
color: '#f4e3e7',
from: 0,
to: 15,
events: {
mouseover: function(e) {
team_tooltipUpdate();
}
},
zIndex: 3
}],
gridLineColor: null,
title: {
text: 'Distance (kms)'
},
plotLines: [{
color: '#FF0000',
width: 2,
value: 15 }]
},
tooltip: {
useHTML: true,
formatter: team_myFormatter
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [
{
name: 'Mark',
data: []
}, {
name: 'Joe',
data: [[Date.parse('7/28/2013 UTC'), 7.2954706108315 ]]
}, {
name: 'Max',
data: [[Date.parse('7/28/2013 UTC'), 25.668099736872 ]]
}, {
name: 'John',
data: [[Date.parse('7/28/2013 UTC'), 16.576099736872 ]]
} ,{
name: 'yellowline',
visible: false,
showInLegend: false,
data: []
}
]
});
});
function team_tooltipUpdate(){
var chart = $('#team_container').highcharts();
chart.tooltip.refresh(chart.series[4].points[0]);
}
function team_myFormatter(){
var game_parameter = 'running';
if(this.series.name == 'yellowline'){
return '<span style="color:Red;"><b>Danger Area</b></div>';
}else{
if(game_parameter == 'running'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' kms</span>';
}else if(game_parameter == 'steps'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +', No. of Steps: '+ parseFloat(this.y).toFixed(2) +'</span>';
}else if(game_parameter == 'floors'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +', No. of Floors: '+ parseFloat(this.y).toFixed(2) +'</span>';
}else if(game_parameter == 'cycling'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' kms</span>';
}else if(game_parameter == 'heartrate'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' BPM</span>';
}
}
}
答案 0 :(得分：1)
问题在于，只有一点，Highcharts将无法为任何系列计算pointRange。在这种情况下，直接为系列设置pointRange，请参阅：http://jsfiddle.net/b33mN/5/
在示例中，pointRange = tickInterval，它可能是您想要实现的。
答案 1 :(得分：1)
您必须为系列设置pointRange选项。
pointRange：在线性和日期时间轴上，范围将计算为两个最接近的数据点之间的距离。
由于只有一点，Highchart无法计算pointRange ...
为了确保它能够正常工作，请将其置于tickInterval值。
// ...
plotOptions: {
series: {
pointRange: 24 * 3600 * 1000, // tickInterval has the same value
// ...
},
// ...
},
// ...
关于第一个和最后一个标签的问题：
xAxis: {
// ...
showFirstLabel: false,
showLastLabel: false,
// ...
}
看看这个Example。
答案 2 :(得分：0)
我知道这是一个迟到但有用的答案，我在使用列图时使用配置的 pointPlacement 属性，这里有一个说明如何使用它的plunker使列彼此相邻。结果：http://plnkr.co/edit/uqZ4LEugMefLD6WSzHZT?p=preview
$(function () {
$('#container2').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'category',
categories:["Population","Kokulation"]
},
legend: {
enabled: false
},
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0,
pointWidth:20
},
},
tooltip: {
shared: false
},
series: [{
name: 'Population',
data: [
['Shanghai', 23.7],
['Lagos', 16.1]
],
pointPlacement:0.23
},
{name:"Kokulation",
data:[
['Istanbul', 14.2],
['Karachi', 14.0]
],
pointPlacement:-0.2146
}
]
});
});