[英]Angular Highcharts Custom Legend Label In Area Chart
I've to customize label symbol in area chart type as it can done in line chart type: 我必须在面积图类型中自定义标签符号,就像在折线图类型中一样:
I've this code: 我有以下代码:
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
My legend is like this: 我的传说是这样的:
I expect to have this: 我希望有这个:
I can't edit css style, this must be an exclusive customization for only this chart. 我无法编辑CSS样式,这仅是对此图表的专有定制。
I'm using angular 7.2, I've imported Highchart with this: 我正在使用Angular 7.2,我已经用这个导入了Highchart:
import {Chart} from 'angular-highcharts';
Swap the area .prototype.drawLegendSymbol method with line .prototype.drawLegendSymbol. 用行 .prototype.drawLegendSymbol交换区域 .prototype.drawLegendSymbol方法。 This is enough in pure JS: 在纯JS中就足够了:
Highcharts.seriesTypes.area.prototype.drawLegendSymbol =
Highcharts.seriesTypes.line.prototype.drawLegendSymbol;
In angular you can wrap Highcharts this way: 您可以通过以下方式在Highcharts中包裹角度:
(function(factory) {
if (typeof module === "object" && module.exports) {
module.exports = factory;
} else {
factory(Highcharts);
}
})(function(Highcharts) {
Highcharts.seriesTypes.area.prototype.drawLegendSymbol =
Highcharts.seriesTypes.line.prototype.drawLegendSymbol;
});
docs: https://github.com/highcharts/highcharts-angular#to-load-a-wrapper docs: https : //github.com/highcharts/highcharts-angular#to-load-a-wrapper
You can achieve that by manually setting width and height of the legend symbols. 您可以通过手动设置图例符号的宽度和高度来实现。 You need to set squareSymbol
to false
to allow having different values for width and height: 您需要将squareSymbol
设置为false
以使宽度和高度具有不同的值:
legend: {
squareSymbol: false,
symbolHeight: 3,
symbolWidth: 20
},
For example. 例如。
EDIT 编辑
If you want to align the symbol with text, use useHTML: true
and set the lineHeight
: 如果要将符号与文本对齐,请使用useHTML: true
并设置lineHeight
:
legend: {
useHTML: true,
itemStyle: {
lineHeight: "23px"
},
squareSymbol: false,
symbolHeight: 3,
symbolWidth: 20
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.