をクリックしたときに、私はリンクが私のチャートで動作するようにしようとしていますが、パイドーナツバージョンのいずれかをクリックすると、私は次のエラーが表示されますHighchartsパイドーナツ:エラーURL
{"error": "Please use POST request"}
私は私にそれをアップロード私はそれが単に "未定義"として返ってくるのを見る。 (www.mywebsite.com/undefined)
をここに私が使用しているコードである:
$(function() {
var colors = Highcharts.getOptions().colors,
categories = ['Agua', 'Gas', 'Electricidad'],
data = [{
y: 17.5,
color: '#c27ba0',
drilldown: {
name: 'Agua',
categories: ['Lavadora', 'Fregadero de platos', 'Inodoro', 'Regadera del baño'],
data: [5, 5, 5, 5],
url: ['https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com'],
color: '#c27ba0'
}
}, {
y: 17.5,
color: '#f1c232',
drilldown: {
name: 'Gas',
categories: ['Sistema Calefacción', 'Calentador de agua', 'Estufa', 'Secadora de ropa'],
data: [5, 5, 5, 5],
url: ['https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com'],
color: '#f1c232'
}
}, {
y: 72,
color: '#e06666',
drilldown: {
name: 'Electricidad',
categories: ['Aire acondicionado', 'Ventilador', 'Plancha', 'Secadora de Cabello', 'Focos',
'Lavadora', 'Televisión', 'Refrigerador', 'Horno de microondas', 'Aspiradora', 'Licuadora', 'Estereo', 'Cafetera', 'Computadora','Tostador','Extractor'],
data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
url: ['https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com', 'https://yahoo.com'],
color: '#e06666'
}
}],
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,
url: data[i].url
});
// 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: 'Ahorra Energia'
},
yAxis: {
title: {
text: 'Fuente de Energia
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%'],
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Energia',
show: false,
data: browserData,
size: '60%',
dataLabels: {
formatter: function() {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -60
}
}, {
name: 'Versions',
data: versionsData,
size: '80%',
innerSize: '50%',
point: {
events: {
click: function() {
location.href = this.series.options.url;
}
}
},
dataLabels: {
formatter: function() {
return this.point.name
},
color: 'black',
distance:-10
}
}]
});
は})。
私のコードはjsfiddleにもあります。
また、Point-> Events-> Click関数を系列からplotOptionsを無駄に移動することで、動作させようとしました。
どうすればこの問題を解決できますか?
は、私は、あなたのコード内で1つのURL(yahoo.comへのポイント)を見つけました。内側の円のスライスの3つすべてにURLを付ける必要がありますか?また、あなたは内側のパイスライスをクリックすることをユーザーに期待しているのですか?また、外側のパイスライスをクリックすることもできますか?これらのクリックはどのように処理する必要がありますか? –
ああ、あなたのjsfiddleがあなたがここに投稿したコードと一致しないことに気付きました。 –