我有一个要求,以延长我的情节带以外的图形,并给予一个形状。需要实现的部分标记在所附的截图。使用highchart android Package 器。而搜索的解决方案,我发现jsfidle我想做同样的事情使用android Package 器;我正在使用版本为6.1.4的highchart库
targetimage
Link : https://jsfiddle.net/BlackLabel/e52smy16/
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
const renderCustomPlotBand = function(chart) {
let ren = chart.renderer,
customOptions = chart.yAxis[0].options.customPlotBand,
from = customOptions.from,
to = customOptions.to,
xEnd = chart.plotLeft + chart.plotSizeX,
xBeginig = chart.plotLeft - 40,
point1 = [xEnd, chart.yAxis[0].toPixels(from)],
point2 = [xBeginig, chart.yAxis[0].toPixels(from)],
point3 = [xBeginig, chart.yAxis[0].toPixels(to)],
point4 = [xEnd, chart.yAxis[0].toPixels(to)],
textWidth = chart;
if (customOptions.enabled) {
chart.customPlotBand = ren.g('customPlotBand').add().toFront()
chart.customText = ren.g('customText').add().toFront();
ren.path(['M', point1[0], point1[2], 'L', point2[0], point2[2], point3[0], point3[2], point4[0], point4[2]])
.attr({
'stroke-width': 1,
stroke: 'red'
}).add(chart.customPlotBand);
ren.label(customOptions.text, point2[0] - 10, point2[2] - 17).attr({
padding: 5,
fill: 'white',
rotation: -90
}).add(chart.customText);
chart.customText.translate(0, -(point2[2] - point3[2]) / 2 + chart.customText.element.getBBox().height - 3)
}
}
Highcharts.chart('container', {
chart: {
marginLeft: 80,
events: {
render() {
renderCustomPlotBand(this)
}
}
},
yAxis: [{
//Declere your custom plotband
customPlotBand: {
enabled: true,
from: 2,
to: 4,
text: 'Target'
},
title: {
text: null
},
lineWidth: 1,
gridLineWidth: 1
}],
series: [{
data: [1, 3, 6, 2, 5]
}]
});```
1条答案
按热度按时间xytpbqjk1#
遗憾的是,由于渲染器模块在Android Package 器中不可用,因此无法像所提供的示例那样创建自定义plotBand。
实现类似行为的唯一方法是使用静态plotBand。