Highcharts中两个折线图中的数据标签重叠

Highcharts中两个折线图中的数据标签重叠,highcharts,Highcharts,我将两个折线图合并到一个图表中,并使用HighCharts。我面临的问题是,两个折线图的数据标签正在重叠。我试过使用allowOverlap:是的,但没有用。有人能分享一些有帮助的例子吗 //创建图表 Highcharts.chart('容器'{ 图表:{ 键入:“行”, }, 标题:{ 文本:“” }, 副标题:{ 文本:“” }, 亚克斯:{ //最低:0 //最高:1 //时间间隔:0 }, xAxis:{ 类型:'类别', 标签:{ 是的, 风格:{ paddingTop:'10px'

我将两个折线图合并到一个图表中,并使用HighCharts。我面临的问题是,两个折线图的数据标签正在重叠。我试过使用allowOverlap:是的,但没有用。有人能分享一些有帮助的例子吗

//创建图表
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"
        }]
      }]
        }
});