Добавление описательной к круговой диаграмме (Highcharts)

Question

Я ищу, чтобы заполнить пространство по бокам круговой диаграммы, и я хотел бы добавить некоторые дополнительные повествование, чтобы объяснить информацию о графике ..

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

Это код, который я до сих пор для создания круговой диаграммы

$('.companyName').highcharts({ 
chart: { 
    plotBackgroundColor: null, 
    plotBorderWidth: null, 
    plotShadow: true, 
    type: 'pie' 
}, 
title: { 
    text: 'Division' 
}, 
subtitle: { 
    text: 'Quarter 1 (0/17/2015 - 10/23/2015)'  
}, 
legend: { 
    layout: 'vertical', 
    align: 'right', 
    verticalAlign: 'top', 
    x: -40, 
    y: 40, 
    floating: true, 
    borderWidth: 1, 
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
    shadow: true 
}, 
tooltip: { 
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
}, 
plotOptions: { 
    pie: { 
     allowPointSelect: true, 
     cursor: 'pointer', 
     showInLegend: true, 
     dataLabels: { 
      enabled: true, 
      format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
      style: { 
       color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
      }, 
      connectorColor: 'silver' 
     } 
    } 
}, 
series: [{ 
    type: 'pie', 
    name: '', 
    data: [ 
     ['Department 1', 334] 
     ,['Department 2', 224] 
     ,['Department 3', 105] 
     ,['Department 4', 19] 
     ,['Department 5', 1]    
    ] 
}] 
}); 

Answer 1

разместить дополнительные элементы в Highcharts диаграмму можно использовать Renderer и добавить, например, text или label.

$(function() { 
    $('#companyName').highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: true, 
      type: 'pie' 
     }, 
     title: { 
      text: 'Division' 
     }, 
     subtitle: { 
      text: 'Quarter 1 (0/17/2015 - 10/23/2015)' 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -40, 
      y: 40, 
      floating: true, 
      borderWidth: 1, 
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
      shadow: true 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       showInLegend: true, 
       dataLabels: { 
        enabled: true, 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
        style: { 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
        }, 
        connectorColor: 'silver' 
       } 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: '', 
      data: [ 
       ['Department 1', 334], 
       ['Department 2', 224], 
       ['Department 3', 105], 
       ['Department 4', 19], 
       ['Department 5', 1] 
      ] 
     }] 
    }, function (chart) { // on complete 
     chart.renderer.label('Adding narrative to<br> pie chart (highcharts)', 250, 200, null, 100, 100) 
      .css({ 
      color: '#FFFFFF' 
     }) 
      .attr({ 
      fill: 'rgba(0, 0, 0, 0.75)', 
      padding: 8, 
      r: 5, 
      zIndex: 6 
     }) 
      .add(); 

    }); 
}); 

JSFiddle: http://jsfiddle.net/mxrwztaz/