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.因此,值in var VALUES = [50, 30, 40, 95, 35];表示图中的百分比(0-100比例).

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

只有一个限制:BORDER_COLOR必须与图表背景颜色的颜色相同.在我创建的jsFiddle中,这是body文档的内容(请参阅jsFiddle中的右上角CSS).

我希望你喜欢它 :)

带我去看DEMO吧!