如何自定义此图表的高级图表

我必须使用highcharts绘制如下图所示的图形。

我已经设法做所有的事情，期望显示网格和他们的标签。

$(function() { var options = $.parseJSON('{"chart":{"renderTo":"container","type":"column"},"averageText":"3.7","plotOptions":{"series":{"pointWidth":["30"],"borderRadius":["10"]},"column":{"pointPadding":[0]}},"credits":{"enabled":false},"title":{"text":"Volume","margin":140},"xAxis":{"categories":[0,1,2,3,4,5,4,3,2,1,0],"gridLineWidth":0},"yAxis":{"labels":{"enabled":true},"title":{"text":"Responses"},"gridLineWidth":0},"series":[{"showInLegend":false,"name":"speaker","data":[{"y":2,"color":"#C82506"},{"y":5,"color":"#BC5B0C"},{"y":3,"color":"#F39019"},{"y":1,"color":"#F5D329"},{"y":1,"color":"#70BF40"},{"y":6,"color":"#01882A"},{"y":10,"color":"#70BF40"},{"y":6,"color":"#F5D329"},{"y":3,"color":"#F39019"},{"y":7,"color":"#BC5B0C"},{"y":3,"color":"#C82506"}]}]}'); new Highcharts.Chart(options, function(chart) { chart.renderer.circle(200, 70, 40).attr({ fill: '#327CAD', stroke: '#327CAD', 'stroke-width': 1, }).add(); chart.renderer.text('3.3', 180, 79) .attr({}) .css({ "color": "#fff", "font-size": "30px", }) .add(); chart.renderer.text('Average', 175, 120) .attr({}) .css({ "color": "#000", }) .add(); }) }); 

这是我到目前为止所做的。 请建议我可以包含哪些更多选项，使其如下图所示

Answer 1

渲染器可以添加所有自定义文本/形状。 轴线可以通过gridLines实现。