具有负值的双甜甜圈图表

Question

我被要求做这种图表（40.9％和16.4％是例子，它们应该表示-6％和9％）：

如果可能的话，使用javascript库可以得到那种结果的任何想法（但这不是必须的）Highcharts？

由于

Answer 1

可以使用HighCharts，Documentation

<强> e.g。

$(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: {
        	    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，删除连接器，为dataLabels设置useHTML并通过css / rotation SVG元素旋转。缺少的元素可以通过renderer添加。