jQuery Highcharts 双 donut chart 表( donut 内的 donut )

Question

我一直致力于使用 highcharts 复制此图表设计。

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

使用 highcharts 是否可以实现这一点？

Answer 1

No, it's perfectly possible. It's just bloody difficult 。但是嘿，为什么不呢？

Highcharts 的问题是您无法以特定角度旋转或定位图表。

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

当然，您不想对所有这些进行硬编码，因此我们需要使用 for 循环生成代码，同时考虑数据条目的起点和终点、数据条目的相对大小 donut (整体尺寸和内部尺寸)、外部 donut 之间的间距、实际值到比率的转换等:我将不再向您介绍详细信息。

经过一番尝试和错误，我最终得到了以下结果:

现在我已经为你准备了一个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)。

希望你喜欢:)

Take me to the DEMO already!