Highcharts中两个折线图中的数据标签重叠
我将两个折线图合并到一个图表中,并使用HighCharts。我面临的问题是,两个折线图的数据标签正在重叠。我试过使用allowOverlap:是的,但没有用。有人能分享一些有帮助的例子吗Highcharts中两个折线图中的数据标签重叠,highcharts,Highcharts,我将两个折线图合并到一个图表中,并使用HighCharts。我面临的问题是,两个折线图的数据标签正在重叠。我试过使用allowOverlap:是的,但没有用。有人能分享一些有帮助的例子吗 //创建图表 Highcharts.chart('容器'{ 图表:{ 键入:“行”, }, 标题:{ 文本:“” }, 副标题:{ 文本:“” }, 亚克斯:{ //最低:0 //最高:1 //时间间隔:0 }, xAxis:{ 类型:'类别', 标签:{ 是的, 风格:{ paddingTop:'10px'
//创建图表
Highcharts.chart('容器'{
图表:{
键入:“行”,
},
标题:{
文本:“”
},
副标题:{
文本:“”
},
亚克斯:{
//最低:0
//最高:1
//时间间隔:0
},
xAxis:{
类型:'类别',
标签:{
是的,
风格:{
paddingTop:'10px'
},
格式化程序:函数(){
如果('Q1'==此.value){
返回“”+this.value+“”;
}否则{
返回“”+this.value+“”;
}
}
}
},
打印选项:{
系列:{
边框宽度:0,
数据标签:{
启用:对,
allowOverlap:是的,
是的,
格式化程序:函数(){
返回“”+this.point.linePointLabelValue+“”;
}
}
}
},
系列:[{
标记:{
符号:“圆圈”
},
“数据”:[{
“x”:0,
“y”:91800,
“linePointLabelValue”:“$918K”,
“labelFontSize”:“14px”,
“四分之一头衔”:“Q1”,
“lineColorCode”:“红色”,
“向下展开”:“Q1A”,
“名称”:“Q1”
}, {
“x”:1,
“y”:0,
“linePointLabelValue”:“$0”,
“labelFontSize”:“14px”,
“四分之一头衔”:“第二季度”,
“lineColorCode”:“红色”,
“向下展开”:“Q2A”,
“名称”:“Q2”
}, {
“x”:2,
“y”:0,
“linePointLabelValue”:“$0”,
“labelFontSize”:“14px”,
“四分之一头衔”:“第三季度”,
“lineColorCode”:“红色”,
“向下展开”:“Q3A”,
“名称”:“Q3”
}, {
“x”:3,
“y”:0,
“linePointLabelValue”:“$0”,
“labelFontSize”:“14px”,
“四分之一头衔”:“第四季度”,
“lineColorCode”:“红色”,
“向下展开”:“Q4A”,
“名称”:“Q4”
}]
}, {
标记:{
符号:“圆圈”
},
“数据”:[{
“x”:0,
“y”:92900,
“linePointLabelValue”:“$3400”,
“labelFontSize”:“14px”,
“四分之一头衔”:“Q1”,
“lineColorCode”:“绿色”,
“向下展开”:“Q1B”,
“名称”:“Q1”
}, {
“x”:1,
“y”:0,
“linePointLabelValue”:“$0”,
“labelFontSize”:“14px”,
“四分之一头衔”:“第二季度”,
“lineColorCode”:“绿色”,
“向下展开”:“Q2B”,
“名称”:“Q2”,
“标记”:{
“半径”:6
}
}, {
“x”:2,
“y”:0,
“linePointLabelValue”:“$0”,
“labelFontSize”:“14px”,
“四分之一头衔”:“第三季度”,
“lineColorCode”:“绿色”,
“向下展开”:“Q3B”,
“名称”:“Q3”
}, {
“x”:3,
“y”:0,
“linePointLabelValue”:“$0”,
“labelFontSize”:“14px”,
“四分之一头衔”:“第四季度”,
“lineColorCode”:“绿色”,
“向下展开”:“Q4B”,
“名称”:“Q4”
}]
}],
向下展开:{
activeDataLabelStyle:{
text装饰:“无”,
},
activeAxisLabelStyle:{
text装饰:“无”,
},
“系列”:[{
“id”:“Q1A”,
标记:{
符号:“圆圈”
},
数据标签:{
启用:对,
},
“数据”:[{
“x”:0,
“y”:12,
“linePointLabelValue”:“$0”,
“labelFontSize”:“14px”,
“季刊”:“二月”,
“lineColorCode”:“绿色”,
“姓名”:“二月”
}, {
“x”:1,
“y”:24,
“linePointLabelValue”:“$0”,
“labelFontSize”:“14px”,
“四分之一头衔”:“三月”,
“lineColorCode”:“绿色”,
“名称”:“MAR”
}, {
“x”:2,
“y”:34,
“linePointLabelValue”:“$0”,
“labelFontSize”:“14px”,
“四分之一头衔”:“四月”,
“lineColorCode”:“绿色”,
“名称”:“APR”
}]
}, {
标记:{
符号:“圆圈”
},
数据标签:{
启用:对,
},
“id”:“Q2A”,
“数据”:[{
“x”:1100,
“y”:0,
“linePointLabelValue”:“$0”,
“labelFontSize”:“14px”,
“季刊”:“二月”,
“lineColorCode”:“绿色”,
“姓名”:“二月”
}, {
“x”:2100,
“y”:0,
“linePointLabelValue”:“$0”,
“labelFontSize”:“14px”,
“四分之一头衔”:“三月”,
“lineColorCode”:“绿色”,
“名称”:“MAR”
}, {
“x”:3100,
“y”:0,
“linePointLabelValue”:“$0”,
“labelFontSize”:“14px”,
“四分之一头衔”:“四月”,
“lineColorCode”:“绿色”,
“名字
// 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"
}]
}]
}
});