Диаграмма с двойными пончиками с отрицательными значениями

Question

Меня попросили сделать такой график (40,9% и 16,4% - примеры, они должны указывать примерно -6% и 9%):

Любая идея о том, как я могу получить такой результат, используя библиотеку JavaScript, если это возможно (но не обязательно) Highcharts?

Благодаря

Answer 1

Это возможно с HighCharts, Documentation

например

$(function() { 
 
     data = [{ 
 
       valSecond: 25, 
 
       valFirst: 62.5 
 
       }]; 
 
     // Build the data arrays 
 
     var secondData = []; 
 
     var firstData = []; 
 
     for (var i = 0; i < data.length; i++) { 
 
    
 
      // add second data 
 
      secondData.push({ 
 
       name: "Second", 
 
       y: data[i].valSecond, 
 
       color: "#00FF00" 
 
      }); 
 
    
 
      // add first data 
 
       firstData.push({ 
 
        name: "First", 
 
        y: data[i].valFirst, 
 
        color:'#FF0000' 
 
       }); 
 
     } 
 
    
 
     // Create the chart 
 
     $('#container').highcharts({ 
 
      chart: { 
 
       type: 'pie' 
 
      }, 
 
      title: { 
 
       text: '' 
 
      }, 
 
      plotOptions: { 
 
       pie: { 
 
        animation: false, 
 
        shadow: false, 
 
        center: ['50%', '50%'] 
 
       } 
 
      }, 
 
      tooltip: { 
 
     \t  valueSuffix: '%' 
 
      }, 
 
      series: [{ 
 
       name: 'second', 
 
       data: secondData, 
 
       size: '30%', 
 
       startAngle: 270, 
 
       endAngle: 360, 
 
       innerSize: '20%' 
 

 
      }, { 
 
       name: 'first', 
 
       color:'#FFFFFF', 
 
       data: firstData, 
 
       size: '80%', 
 
       startAngle: 0, 
 
       endAngle: 225, 
 
       innerSize: '60%', 
 
       
 
      }] 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>

Jsfiddle

Answer 2

В Highcharts вы можете адаптировать пончика диаграмму http://www.highcharts.com/demo/pie-donut, удалить разъемы, установите useHTML для dataLabels и вращение CSS/вращения SVG элемента. Отсутствующие элементы могут быть добавлены renderer.