我将两个折线图合并到一个图表中并使用HighCharts。我面临的问题是两个折线图的数据标签都重叠了。我尝试使用allowOverlap：true，但无济于事。有人可以分享一些可以提供帮助的例子。
http://jsfiddle.net/anandabhishe/ufv13gfe/
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'line',
},
title: {
text: ' '
},
subtitle: {
text: ' '
},
yAxis : {
//min : 0
//max : 1
//thickInterval: 0
},
xAxis: {
type: 'category',
labels: {
useHTML: true,
style: {
paddingTop: '10px'
},
formatter: function () {
if ('Q1' === this.value) {
return '<div style="font-weight: bold; color: red;">' + this.value + '</div>';
} else {
return '<div style="font-weight: normal;">' + this.value + '</div>';
}
}
}
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
allowOverlap : true,
useHTML : true,
formatter: function() {
return '<div style="color : white; padding : 5px; border-radius: 5px; background-color : pink; margin : 10px;">' + this.point.linePointLabelValue + '</div>';
}
}
}
},
series: [{
marker: {
symbol: 'circle'
},
"data": [{
"x": 0,
"y": 91800,
"linePointLabelValue": "$91.8K",
"labelFontSize": "14px",
"quarterTitle": "Q1",
"lineColorCode": "red",
"drilldown": "Q1A",
"name": "Q1"
}, {
"x": 1,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q2",
"lineColorCode": "red",
"drilldown": "Q2A",
"name": "Q2"
}, {
"x": 2,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q3",
"lineColorCode": "red",
"drilldown": "Q3A",
"name": "Q3"
}, {
"x": 3,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q4",
"lineColorCode": "red",
"drilldown": "Q4A",
"name": "Q4"
}]
}, {
marker: {
symbol: 'circle'
},
"data": [{
"x": 0,
"y": 92900,
"linePointLabelValue": "$3.4K",
"labelFontSize": "14px",
"quarterTitle": "Q1",
"lineColorCode": "green",
"drilldown": "Q1B",
"name": "Q1"
}, {
"x": 1,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q2",
"lineColorCode": "green",
"drilldown": "Q2B",
"name": "Q2",
"marker": {
"radius": 6
}
}, {
"x": 2,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q3",
"lineColorCode": "green",
"drilldown": "Q3B",
"name": "Q3"
}, {
"x": 3,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "Q4",
"lineColorCode": "green",
"drilldown": "Q4B",
"name": "Q4"
}]
}],
drilldown: {
activeDataLabelStyle: {
textDecoration: 'none',
},
activeAxisLabelStyle: {
textDecoration: 'none',
},
"series": [{
"id": "Q1A",
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"data": [{
"x": 0,
"y": 12,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 1,
"y": 24,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 2,
"y": 34,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q2A",
"data": [{
"x": 1100,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2100,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3100,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q3A",
"data": [{
"x": 1200,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2200,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3200,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q4A",
"data": [{
"x": 1300,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2300,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3300,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q1B",
"data": [{
"x": 1400,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2400,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3400,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q2B",
"data": [{
"x": 1410,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2410,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3410,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q3B",
"data": [{
"x": 1420,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2420,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3420,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}, {
marker: {
symbol: 'circle'
},
dataLabels: {
enabled: true,
},
"id": "Q4B",
"data": [{
"x": 1430,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "FEB",
"lineColorCode": "green",
"name": "FEB"
}, {
"x": 2430,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "MAR",
"lineColorCode": "green",
"name": "MAR"
}, {
"x": 3430,
"y": 0,
"linePointLabelValue": "$0",
"labelFontSize": "14px",
"quarterTitle": "APR",
"lineColorCode": "green",
"name": "APR"
}]
}]
}
});
答案 0 :(得分：0)
我怀疑这种不受欢迎的行为的原因是钻取时点数的大轴（> 1000）x轴。
在初始视图中，一切看起来都很好 - 点的x值较低（0,1,2和3），并且可以使用类别。 Highcharts类别机制在x轴上创建标签，从0开始，间隔等于1.
因此，如果您突然切换到x轴上的大数字，Highcharts希望保留tickInterval。这种情况不可能发生，因为价值范围很广 - 约1500个标签不适合。
Highcharts尝试在x轴上打包尽可能多的标签，并找到tickInterval的新值 - 尽可能小。