gpt4 book ai didi

jquery - Highchart donut 派 - 是否有最大切片数

转载 作者:行者123 更新时间:2023-12-01 01:33:11 31 4
gpt4 key购买 nike

(“ donut 派”)是否有最大切片数?我使用了 highchart(“ donut 派”)示例,但无法超过 10 个切片。请注意,内部切片“F”丢失了。下面是示例代码。

http://jsfiddle.net/600phuws/

$(function () {

var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera', 'A', 'B', 'C', 'D', 'E', 'F'],
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}, {
y: 8.15,
color: colors[5],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[5]
}
}, {
y: 9.15,
color: colors[6],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[6]
}
}, {
y: 10.15,
color: colors[7],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[7]
}
}, {
y: 11.15,
color: colors[8],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[8]
}
}, {
y: 12.15,
color: colors[9],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[9]
}
}, {
y: 13.15,
color: colors[10],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[10]
}
},
],
browserData = [],
versionsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;


// Build the data arrays
for (i = 0; i < dataLen; i += 1) {

// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});

// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}

// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, April, 2011'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Browsers',
data: browserData,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
});

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

示例 Highcharts - "Donut Pie"

最佳答案

似乎 Highchart 的可用颜色列表有限(只有 10 种)。

另一位用户 ( user2465233 ) 写了 work-around重复这些现有颜色,为图表中尽可能多的切片创建新颜色。

// Workaround for the lack of colors in Highcharts.getOptions().colors
// written by user2465233

var colors = [];
for (var i = 0; i < categories.length; i++) {
if (i < Highcharts.getOptions().colors.length) {
colors.push(Highcharts.getOptions().colors[i]);
} else {
colors.push(Highcharts.getOptions().colors[i - Highcharts.getOptions().colors.length]);
}
}

$(function() {

var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera', 'A', 'B', 'C', 'D', 'E', 'F'];

// Workaround for the lack of colors in Highcharts.getOptions().colors
var colors = [];
for (var i = 0; i < categories.length; i++) {
if (i < Highcharts.getOptions().colors.length) {
colors.push(Highcharts.getOptions().colors[i]);
} else {
colors.push(Highcharts.getOptions().colors[i - Highcharts.getOptions().colors.length]);
}
}

var data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'
],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'
],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
data: [0.12, 0.37, 1.65],
color: colors[4]
}
}, {
y: 8.15,
color: colors[5],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'
],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[5]
}
}, {
y: 9.15,
color: colors[6],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'
],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[6]
}
}, {
y: 10.15,
color: colors[7],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'
],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[7]
}
}, {
y: 11.15,
color: colors[8],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'
],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[8]
}
}, {
y: 12.15,
color: colors[9],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'
],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[9]
}
}, {
y: 13.15,
color: colors[10],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'
],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[10]
}
}, ],
browserData = [],
versionsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;






// Build the data arrays
for (i = 0; i < dataLen; i += 1) {

// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});

// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}

// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, April, 2011'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Browsers',
data: browserData,
size: '60%',
dataLabels: {
formatter: function() {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

当然,完整的功劳归于 user2465233 。由于自 2013 年 8 月以来他/她就没有在 StackOverflow 上“见过”,我认为他/她不太可能回来发布答案。

<小时/>

编辑:

这是另一种更短的方法。分配颜色时,我使用 modulo operation将任何切片编号映射到可用的 HighChart 颜色。

var color_index = i>(colors.length-1) ? i%colors.length : i;

给定任何切片编号i,这会生成一个落在可用颜色范围内的color_index。然后,使用该 color_index 引用 HighChart 生成的 colors 数组:

var this_color = colors[color_index];

// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: this_color
});

// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(this_color).brighten(brightness).get()
});
}

在下面的代码片段中,我添加了一堆额外的切片来演示灵 active :

$(function() {

var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera', 'A', 'B', 'C', 'D', 'E', 'F'],
data = [{
y: 55.11,
color: colors[0],
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
data: [10.85, 7.35, 33.06, 2.81]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'
],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'
],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
data: [0.12, 0.37, 1.65]
}
}, {
y: 8.15,
color: colors[5],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'
],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
}
}, {
y: 9.15,
color: colors[6],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'
],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
}
}, {
y: 10.15,
color: colors[7],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'
],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
}
}, {
y: 11.15,
color: colors[8],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'
],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
}
}, {
y: 12.15,
color: colors[9],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'
],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
}
}, {
y: 13.15,
color: colors[10],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'
],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
}
},

// ADDITIONAL SLICES BELOW, FOR DEMOSTRATION PURPOSES

{
y: 13.15,
color: colors[10],
drilldown: {
name: 'Extra',
categories: ['Extra 1', 'Extra 2', 'Extra 3'],
data: [4.55, 1.42, 0.23]
}
}, {
y: 13.15,
color: colors[10],
drilldown: {
name: 'Extra',
categories: ['Extra 1', 'Extra 2', 'Extra 3'],
data: [4.55, 1.42, 0.23]
}
}, {
y: 13.15,
color: colors[10],
drilldown: {
name: 'Extra',
categories: ['Extra 1', 'Extra 2', 'Extra 3'],
data: [4.55, 1.42, 0.23]
}
}, {
y: 13.15,
color: colors[10],
drilldown: {
name: 'Extra',
categories: ['Extra 1', 'Extra 2', 'Extra 3'],
data: [4.55, 1.42, 0.23]
}
}, {
y: 13.15,
color: colors[10],
drilldown: {
name: 'Extra',
categories: ['Extra 1', 'Extra 2', 'Extra 3'],
data: [4.55, 1.42, 0.23]
}
}, {
y: 13.15,
color: colors[10],
drilldown: {
name: 'Extra',
categories: ['Extra 1', 'Extra 2', 'Extra 3'],
data: [4.55, 1.42, 0.23]
}
}, {
y: 13.15,
color: colors[10],
drilldown: {
name: 'Extra',
categories: ['Extra 1', 'Extra 2', 'Extra 3'],
data: [4.55, 1.42, 0.23]
}
}, {
y: 13.15,
color: colors[10],
drilldown: {
name: 'Extra',
categories: ['Extra 1', 'Extra 2', 'Extra 3'],
data: [4.55, 1.42, 0.23]
}
}, {
y: 13.15,
color: colors[10],
drilldown: {
name: 'Extra',
categories: ['Extra 1', 'Extra 2', 'Extra 3'],
data: [4.55, 1.42, 0.23]
}
}, {
y: 13.15,
color: colors[10],
drilldown: {
name: 'Extra',
categories: ['Extra 1', 'Extra 2', 'Extra 3'],
data: [4.55, 1.42, 0.23]
}
}, {
y: 13.15,
color: colors[10],
drilldown: {
name: 'Extra',
categories: ['Extra 1', 'Extra 2', 'Extra 3'],
data: [4.55, 1.42, 0.23]
}
},

// END ADDITIONAL SLICES


],
browserData = [],
versionsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;





// Build the data arrays
for (i = 0; i < dataLen; i += 1) {

var color_index = i > (colors.length - 1) ? i % colors.length : i,
this_color = colors[color_index];

// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: this_color
});

// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(this_color).brighten(brightness).get()
});
}

}

// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, April, 2011'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Browsers',
data: browserData,
size: '60%',
dataLabels: {
formatter: function() {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

关于jquery - Highchart donut 派 - 是否有最大切片数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28442831/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com