Highchart Kuchen Donut: Fehler beim Klicken auf URL

Question

Ich versuche, die Links zu machen in meinem Diagramm zu arbeiten, aber ich die folgende Fehlermeldung, wenn eine der Kuchen Donut Versionen klicken:

{"error": "Please use POST request"} 

ich hochgeladen es zu meinem Web-Server und ich sehe, dass es einfach als "undefined" zurückgibt. (Www.mywebsite.com/undefined)

Hier ist der Code ich verwende:

$(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 
     } 
    }] 
}); 

});

Mein Code ist in jsfiddle auch.

Ich habe auch versucht, es funktioniert, indem Sie die Point-> Events-> Click-Funktion aus der Reihe PlotOptions ohne Erfolg zu bewegen.

Wie kann ich das beheben?

Answer 1

Der Fehler, den Sie sehen, ist, dass JSFiddle Ihnen mitteilt, dass mit einer von Ihnen angeforderten URL etwas nicht stimmt. Dies wurde dadurch verursacht, dass Ihr Code nicht die korrekte URL gefunden hat. Um es zu beheben, ändern Sie die Klick-Funktion dazu:

click: function(event) { 
    location.href = event.point.url; 
} 

Auch wenn der Code Elemente in die versionsData Array hinzufügen, müssen Sie ein URL-Objekt zu jedem Element hinzuzufügen. Ändern Sie Ihre versionsData Code dazu:

versionsData.push({ 
     name: data[i].drilldown.categories[j], 
     y: data[i].drilldown.data[j], 
     color: Highcharts.Color(data[i].color).brighten(brightness).get(), 
     url: data[i].drilldown.url[j] 
    }); 

Am Ende der Code sollte wie folgt aussehen:

$(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(), 
     url: data[i].drilldown.url[j] 
     }); 
    } 
    } 

    // 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(event) { 
      location.href = event.point.url; 
      } 
     } 
     }, 
     dataLabels: { 
     formatter: function() { 
      return this.point.name 
     }, 
     color: 'black', 
     distance: -10 
     } 
    }] 
    }); 
});