如何自定义此图highcharts(How to customize highcharts for

我要绘制图形类似下使用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:

所有的自定义文本/图形可以通过添加渲染器 。 轴线可以由网格线来实现。

文章来源: How to customize highcharts for this graph