如何解决如何在highchart的箱形图中显示时间?
请在 Highcharts 选项中以示例建议以下图像图表?
解决方法
您可以使用气泡系列类型和 Highcharts.SVGRenderer
类。
events: {
load: function() {
var xAxis = this.xAxis[0],yAxis = this.yAxis[0],x1 = xAxis.toPixels(1),y1 = yAxis.toPixels(6),x2 = xAxis.toPixels(1),y2 = yAxis.toPixels(2),x3 = xAxis.toPixels(2),y3 = yAxis.toPixels(4),x4 = xAxis.toPixels(2),y4 = yAxis.toPixels(8);
this.renderer.path([
'M',x1,y1,'L',x2,y2,'Q',x2 + (x3 - x2) / 2,y2 + (y3 - y2) / 2 - 20,x3,y3,x4,y4,x1 + (x4 - x1) / 2,y1 + (y4 - y1) / 2 - 20,y1
])
.attr({
'stroke-width': 2,stroke: 'red','stroke-dasharray': [5,5]
})
.add();
}
}
现场演示: https://jsfiddle.net/BlackLabel/wk8p9vhc/
关于 SVG 路径: https://www.w3schools.com/graphics/svg_path.asp
API 参考:
https://api.highcharts.com/highcharts/series.bubble
https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。