jQuery Highcharts double donut chart(donut within donut)

hwazgwia  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(90)

我一直在用highcharts复制这个图表设计。

我一直在尝试使用jsfiddle来获得预期的结果,但问题是我无法获得百分比未填充的白色区域,也无法获得条形图之间的间隙。

这是可能的使用highcharts?

92dk7w1h

92dk7w1h1#

No, it's perfectly possible. It's just bloody difficult但是为什么不呢
highcharts 的问题是,你不能旋转,也不能以特定的Angular 定位你的图表。
因此,为了让您创建您提到的效果,我们必须为每个新数据项创建一个单独的图表。
当然,你不想硬编码所有这些,所以我们需要用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)。

希望你喜欢:)

Take me to the DEMO already!

相关问题