[英]Angular Highcharts Custom Legend Label In Area Chart
我必须在面积图类型中自定义标签符号,就像在折线图类型中一样:
我有以下代码:
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]
}]
});
我无法编辑CSS样式,这仅是对此图表的专有定制。
我正在使用Angular 7.2,我已经用这个导入了Highchart:
import {Chart} from 'angular-highcharts';
用行 .prototype.drawLegendSymbol交换区域 .prototype.drawLegendSymbol方法。 在纯JS中就足够了:
Highcharts.seriesTypes.area.prototype.drawLegendSymbol =
Highcharts.seriesTypes.line.prototype.drawLegendSymbol;
您可以通过以下方式在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
您可以通过手动设置图例符号的宽度和高度来实现。 您需要将squareSymbol
设置为false
以使宽度和高度具有不同的值:
legend: {
squareSymbol: false,
symbolHeight: 3,
symbolWidth: 20
},
例如。
编辑
如果要将符号与文本对齐,请使用useHTML: true
并设置lineHeight
:
legend: {
useHTML: true,
itemStyle: {
lineHeight: "23px"
},
squareSymbol: false,
symbolHeight: 3,
symbolWidth: 20
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.