帶有負值的雙圓環狀圖表

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

在可以適應圓環圖http://www.highcharts.com/demo/pie-donut，取出連接器highcharts，對於dataLabels設置useHTML和由CSS /旋轉SVG元件旋轉。缺失的元素可以通過renderer添加。