【发布时间】：2016-08-05 03:29:29
【问题描述】：
我正在尝试使链接在我的图表中起作用，但在单击其中一个 Pie Donut 版本时收到以下错误：
{"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 来使其工作，但无济于事。
我该如何解决这个问题？
【问题讨论】：
-
我在您的代码中只找到了一个 URL（指向 yahoo.com）。所有三个内部饼图都应该有 URL 吗？此外，您是否只希望用户点击内部饼图，或者他们也可以点击外部饼图？应该如何处理这些点击？
-
啊，我刚刚注意到您的 jsfiddle 与您在此处发布的代码不匹配。
标签： javascript highcharts