Полуконусная диаграмма с высокими диаграммами

Question

Я пытаюсь получить диаграмму, как показано ниже, используя библиотеку Highcharts.

Все, что я был в состоянии достигнуть это http://jsfiddle.net/HpdwR/1489/. Так что я могу контролировать, насколько покрывает внешний круг и его цвет. Также помещаем заголовок в центр графика.

Вот конфиг я использовал, чтобы нарисовать диаграмму

{ 
    chart: { 
     renderTo: 'container', 
     type: 'pie' 
    }, 
    title: { 
     text: 'Browser market share, April, 2011' 
    }, 
    yAxis: { 
     title: { 
      text: 'Total percent market share' 
     } 
    }, 
    plotOptions: { 
     pie: { 
      shadow: false 
     } 
    }, 
    tooltip: { 
     formatter: function() { 
      return '<b>' + this.point.name + '</b>: ' + this.y + ' %'; 
     } 
    }, 
    series: [{ 
     name: 'Browsers', 
     data: [ 
      ["Chrome", 70] 
     ], 
     size: '60%', 
     innerSize: '60%', 
     showInLegend: true, 
     dataLabels: { 
      enabled: false 
     } 
    }] 
} 

Я также хотел бы знать, если есть какие-либо другие JS библиотеки, которые могли бы сделать такой же.

подсказка Изображение

Answer 1

Вы можете использовать твердый калибра типа диаграммы с окружностью фоном (вместо дуги по умолчанию).

pane: { 
     center: ['50%', '50%'], 
     size: '100%', 
     startAngle: 0, 
     endAngle: 360, 
     background: { 
      backgroundColor: 'black', 
      innerRadius: '0%', 
      outerRadius: '80%', 
      shape: 'circle' 
     } 
    }, 
plotOptions: { 
      solidgauge: { 
       dataLabels: { 
        enabled: true, 
        y: -25, 
        borderWidth: 0, 
        useHTML: true, 
        format: '<div style="text-align:center"><span style="font-size:45px;color:#fff;">{y}</span><br/>' + 
         '<span style="font-size:12px;color:silver">%</span></div>' 
       } 
      } 
     }, 

Пример: http://jsfiddle.net/12kwyftq/1/

Answer 2

вы можете использовать начальный угол, конечный угол, чтобы сделать желаемый вид

  startAngle: -90, 
      endAngle: 90, 
      center: ['50%', '75%'] 

пример fiddle