jquery - jQuery Highcharts 双甜甜圈图（甜甜圈中的甜甜圈）

Question

我一直在努力使用 highcharts 来复制这个图表设计。

我一直在玩 jsfiddle 试图获得所需的结果，但问题是我无法获得未填充百分比的白色区域，也无法获得条形之间的间隙。

这甚至可以使用highcharts吗？

Answer 1

不，这完全有可能。简直太难了。但是，嘿，为什么不呢？

高图表的问题是您不能以特定角度旋转或定位图表。

因此，为了让您创建您提到的效果，我们必须为每个新数据项创建一个单独的图表。

当然，您不想对所有这些进行硬编码，因此我们需要使用for循环生成代码，同时考虑数据条目的起点和终点、甜甜圈的相对大小（整体大小和内部大小）、间距在外部甜甜圈之间，将实际值转换为比率等等等：我不会详细说明。

经过反复试验，我得到了以下结果：

现在我为您准备了一个 jsFiddle，因此您可以根据自己的喜好调整设置并获得您想要的结果。最重要的参数是：

// Specify all properties here:
var MIN = 0;                       // Specify minimum value (beginning of range) 
var MAX = 100;                     // Specify maximum value (ending of range)
var VALUES = [50, 30, 40, 95, 35]; // Specify the values
var VALUES_WHITE = [20, 20, 20, 20, 20]; // Values for the white donut (5 x 100/5)
var COLORS = ['#1FFFF0', '#FFCD05', '#68EB05', '#EB13EB', '#A7EB09']; // Colors
var CATEGORIES = ['Activity', 'Weight', 'Sleep', 'Health', 'Diet'];   // Categories
var BORDERWIDTH_CHART_1 = 20;       // The border width for the white donut chart
var BORDER_COLOR = 'rgba(96, 72, 193, 1)';

然后将在代码中使用这些参数来确定我上面提到的所有变量。例如，我现在为这些值创建了最小值0和最大值100。因此， 中的值var VALUES = [50, 30, 40, 95, 35];表示图表中的百分比（0-100 刻度）。

现在，我为 5 个不同的类别构建了图表。如果您想要更多（或更少），您可以简单地相应地更改属性并且它（应该）工作。我还没有测试过。无论如何，您可以根据自己的喜好改进图表：将百分比添加到标签，改进颜色等。

只有一个限制：BORDER_COLOR必须与图表背景颜色相同。在我创建的 jsFiddle 中，这是body文档的（参见 jsFiddle 中右上角的 CSS）。

我希望你喜欢它 ：）

带我去DEMO吧！