我有问题，请给我一些建议？我想将饼图2d转换为3d。请帮帮我。请给我一些想法。 谢谢链接。 这是以下链接this is follow link is demo this is image of piechart
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['Opp', 'Guess','Thre'],
data = [ {
y: 10.38,
color: colors[2],
drilldown: {
name: 'Firefox versions',
categories: ['Streanth'],
data: [70],
color: colors[2]
}
},
{
y: 5.38,
color: colors[2],
drilldown: {
name: 'Firefox versions',
categories: ['Streanth'],
data: [70],
color: colors[2]
}
},
{
y: 10.03,
color: colors[1],
drilldown: {
name: 'Chrome versions',
categories: ['Weakness'
],
data: [30],
color: colors[1]
}
}],
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, January, 2015 to May, 2015'
},
subtitle: {
text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
},
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: '#ffffff',
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>
这是html代码
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
答案 0 :(得分：0)
尝试这种方式：
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['Opp', 'Guess','Thre'],
data = [ {
y: 10.38,
color: colors[2],
drilldown: {
name: 'Firefox versions',
categories: ['Streanth'],
data: [70],
color: colors[2]
}
},
{
y: 5.38,
color: colors[2],
drilldown: {
name: 'Firefox versions',
categories: ['Streanth'],
data: [70],
color: colors[2]
}
},
{
y: 10.03,
color: colors[1],
drilldown: {
name: 'Chrome versions',
categories: ['Weakness'
],
data: [30],
color: colors[1]
}
}],
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()
});
}
}
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0,
}
},
plotOptions: {
pie: {
depth: 25
}
},
series: [{
name: 'Browsers',
data: browserData,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
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-3d.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
答案 1 :(得分：0)
我这样解决了这个问题。
$(function () {
var colors = Highcharts.getOptions().colors,
categories = ['Strenth : 56', 'Weekness : 23'],
data = [{
y: 20,
color: colors[0],
drilldown: {
name: 'Strenth',
categories: ['Opp', 'Guess'],
data: [15, 5],
color: colors[0]
}
}, {
y: 10,
color: colors[2],
drilldown: {
name: 'Threat',
categories: ['Wrong', 'Threat'],
data: [7, 3],
color: colors[2]
}
}, ],
totalData = [],
subData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add browser data
totalData.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;
subData.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',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: ''
},
subtitle: {
text: ''
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: true,
cursor: 'pointer',
depth: 45,
}
},
tooltip: {
valueSuffix: ''
},
series: [{
name: 'Total',
data: totalData,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'SUB',
data: subData,
size: '80%',
innerSize: '40%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 0.5 ? '<b>' + this.point.name + ':</b> ' + this.y + '' : null;
}
}
}]
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script src="http://code.highcharts.com/exporting.js"></script>