Highcharts空xAxis点列之间的间距
如果Highcharts中的图表有x个列,并且图表中的每一列的每个xAxis点不一定都有数据,那么有没有办法折叠数据点中确实存在的列,以便它们之间没有空格(在没有列数据的情况下)Highcharts空xAxis点列之间的间距,charts,highcharts,Charts,Highcharts,如果Highcharts中的图表有x个列,并且图表中的每一列的每个xAxis点不一定都有数据,那么有没有办法折叠数据点中确实存在的列,以便它们之间没有空格(在没有列数据的情况下) 我不确定我是否理解你的设想。你能给出一张你想要最终产品的图片吗?在你发布的示例中,其他系列中的数据点位于列之间,因此如果不删除这些数据,就无法“折叠”。你可以使用如下解决方法: $(function () { $('#container').highcharts({ chart: {
我不确定我是否理解你的设想。你能给出一张你想要最终产品的图片吗?在你发布的示例中,其他系列中的数据点位于列之间,因此如果不删除这些数据,就无法“折叠”。你可以使用如下解决方法:
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: ''
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true,
reversed: false,
labels: {
step: 1,
rotation: 45
},
type: 'datetime',
tickLength: 7,
showEmpty: false,
tickPositions: [0, 7, 14, 21, 28, 35, 42, 49, 56],
tickmarkPlacement: 'on'
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°F'
},
title: {
text: 'Temperature'
}
}, { // Secondary yAxis
title: {
text: 'Precipitation'
},
labels: {
format: '{value} in'
},
opposite: true
}, { // Tertiary yAxis
title: {
text: ''
},
labels: {
enabled: false
},
opposite: false
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 2,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
plotOptions: {
column: {
marker: {
enabled: false
},
yAxis: 2,
showInLegend: false
},
area: {
color: 'rgb(74, 134, 232)',
lineWidth: 3,
fillOpacity: 0.3,
marker: {
enabled: false,
symbol: 'circle',
radius: 2
},
yAxis: 1,
tooltip: {
valueSuffix: ' in'
}
},
line: {
tooltip: {
valueSuffix: ' °F'
},
lineWidth: 3,
marker: {
enabled: false,
symbol: 'circle',
radius: 2
}
}
},
series: [{
name: 'Harvest',
color: 'rgb(255, 140, 0)',
type: 'column',
data: [100, null, null, null, null, null, null, null, null, null, 100, null]
},{
name: 'Tillage',
color: 'rgb(139, 69, 19)',
type: 'column',
data: [null, 100, null, null, null, null, null, null, null, null, null, 100]
},{
name: 'Irrigation',
color: 'rgb(0, 179, 238)',
type: 'column',
data: [100, 100, null, null, null, null, null, 100, null, null, null, null]
}, {
name: 'Rainfall',
type: 'area',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'Air Temperature',
color: 'rgb(206, 101, 95)',
type: 'line',
data: [9.0, 7.9, 5.4, 12.5, 19.2, 17.8, 24.2, 28.5, 29.3, 32.3, 18.9, 15.6]
}, {
name: 'Soil Temperature',
color: 'rgb(51, 51, 51)',
type: 'line',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});