如何为此图自定义高图 [英] How to customize highcharts for this graph

问题描述

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

  $（function（）{
 
 var options = $ .parseJSON（'{chart：{renderTo ： 容器， 类型： 列}， averageText： 3.7， plotOptions：{ 系列：{ pointWidth：[ 30]， borderRadius：[ 10 ]}， 列：{ pointPadding：[0]}}， 信用：{ 启用：假}， 标题：{ 文本： 音量， 余量：140}， x轴：{ 类别：[0,1,2,3,4,5,4,3,2,1,0]， gridLineWidth：0}， Y轴：{ 标签：{ 已启用：真正}， 称号：{ 文： 回复}， gridLineWidth：0}， 系列：[{ showInLegend：假的， 名： 扬声器，数据：[{ Y ：2，颜色 ： ＃C82506 }，{ Y ：5，颜色 ： ＃BC5B0C }，{ Y ：3，颜色 ： ＃ F39019 }，{ Y ：1， 色彩 ： ＃F5D329 }，{ Y ：1， 色彩 ： ＃70BF40 }，{ Y ：6， 颜色 ： ＃01882A }，{ Y ：10， 色彩 ： ＃70BF40 }，{ Y ：6， 颜色 ： ＃F5D329 }，{ Y ：3，颜色： ＃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（）; 
}）
}）; b 
 
 
 $ b 
 > 这里 是我迄今为止所做的。请告诉我，我可以添加哪些更多的选项，使其看起来像下面的图表：
 
 
  
解决方案
所有自定义文字/形状都可以通过添加渲染器。轴线可以通过gridLines来实现。  
I have to plot the graph something like below using highcharts.

I have managed to do all everything expect showing the grids and their labels .
$(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();
    })
});
Here is what I have done so far. Please suggest me what further option can I include to make it look like graph below

解决方案
All custom text / shapes can be added by renderer. Axis lines can be achieved by gridLines. 

                        
这篇关于如何为此图自定义高图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！