javascript - 带有负值的双甜甜圈状图表

Question

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

如果可能（但不是必须的）Highcharts，关于如何使用 javascript 库获得这种结果的任何想法？

谢谢

Answer 1

有可能HighCharts，文档

例如

$(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>

提琴手

Answer 2

在 highcharts 中，您可以调整圆环图http://www.highcharts.com/demo/pie-donut，删除连接器，为 dataLabels 设置useHTML并通过 css / 旋转 SVG 元素旋转。缺少的元素可以由渲染器添加。