将标签放在 HighCharts 中图表区域的右侧
put labels on the right of the chart area in HighCharts
在 Highcharts 折线图中,我需要将系列名称放在每个图表的最后一个点的右侧。
不幸的是,即使我设置了chart.spacingRight
和chart.marginRight
,也没有使用右边的space。
有没有solution/workaround?
Highcharts.chart('container', {
chart: {
spacingRight: 200
},
plotOptions: {
series: {
label: {
enabled:false
},
pointStart: 2010,
dataLabels: {
enabled:true,
align:'left',
verticalAlign:'middle',
x:10,
formatter: function() {
return this.series.data.indexOf( this.point ) == this.series.data.length - 1 ? this.series.name : '';
}
}
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
});
您可以使用 dataLabels.crop:false
和 dataLabels.overflow: 'allow'
dataLabels: {
overflow: 'allow',
crop:false,
...
Api documentation目前已经坏了,不可能放正品link
在 Highcharts 折线图中,我需要将系列名称放在每个图表的最后一个点的右侧。
不幸的是,即使我设置了chart.spacingRight
和chart.marginRight
,也没有使用右边的space。
有没有solution/workaround?
Highcharts.chart('container', {
chart: {
spacingRight: 200
},
plotOptions: {
series: {
label: {
enabled:false
},
pointStart: 2010,
dataLabels: {
enabled:true,
align:'left',
verticalAlign:'middle',
x:10,
formatter: function() {
return this.series.data.indexOf( this.point ) == this.series.data.length - 1 ? this.series.name : '';
}
}
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
});
您可以使用 dataLabels.crop:false
和 dataLabels.overflow: 'allow'
dataLabels: {
overflow: 'allow',
crop:false,
...
Api documentation目前已经坏了,不可能放正品link